Streaming live at 10am (PST)

Padding problem Dynamic List and Overflw Auto Setting


#1

I'm trying to wrap my head around this issue, but can't seem to solve it.
I have a 2 column layout with 100% height. But I get strange spacing issues, and horizontal scrollbar, eventhough there is no content outside of the boxes to the left or right. I think it has something to do with the default padding that comes with the Dynamic lists in Webflow, but eventhough I deleted those padding settings, still I get a horizontal scrollbar in the right column. And in the slider I can see a small portion of the next slide.

Anyone dare to help me out?


Here is my public share link: https://preview.webflow.com/preview/corvus?preview=c30d7e4d99813f2fdb31f03129ed99be

And live link; http://corvus.webflow.io/


#2

Imm yes I had the same problem, layout seems to be strange using cms


#3

Try this CSS @rowan & @daniel_cleayweb it should remove the strange padding/margin :smile: :

<style>
.w-container .w-row { margin-left: 0px; margin-right: 0px;}
.w-col { padding-left: 0px; padding-right: 0px;}
</style>

#4

Hi Waldo that did the trick indeed! But isn't this an issue? IN the editor I get the scrollbars, but not in the live site when using this code to force removing the margins and paddings. It's a solution, but not at he best one...Or?


#5

@rowan @waldo The code above will likely have unintended side effects :\

This is a know issue due the the fact that .w-container .w-row has a higher CSS specificity than the classes you add on your dynamic lists, but what you can do is add a secondary "combo" class to your list wrapper (which will match the specificity, therefore letting you override styles) and then remove the left/right margins:

Unfortunately the .w-container .w-row style is not something we can remove at this point for backwards-compatibility reasons, but we are designing a new grid system that should address these types of issues in the future.


#6

Hi thanks for the comment! yeah i was afraid of that. I'll try what you did in that GIF. Not sure if i tried it already, but seems like another solution.


#7

Tried this, works! Seems like a safer option to create subclasses on these default negative margins in stead of using custom code to override them all.


#8

Thanks @callmevlad :smile: that's a lot safer option. Great to know!

You rock!

Waldo


#9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.