Hi! I have this pretty basic layout
When the columns get 100% width on mobile it seems that the negative margin is removed from the row as well which moves the column content 10px to the right because of the padding on the columns.
Is there a reason why it is like this or is this a bug?
It’s designed like this. A good thing to do: NEVER style the columns. Never, ever. Don’t even give them a class. Semect them and delete their class name. Once done, put one div in every columns, give it a class and put content in it. When on the device breakpoint, add the padding you want for your layout.
Thanks for your reply Vincent. Yeah, I read that in another thread. What I just wonder is, why you remove the negative margin on the row when the device breakpoint sets the columns to 100%. Why not just leave the negative margin on the row?
Oh it’s not me, I’m only a user 
So I don’t know. But the negative margin allows for keeping the ROW widget in a container and keep sticking to the grid (highlight the grid with the button on the lower left of the UI).
http://vincent.polenordstudio.fr/snap/dglab.jpg
And that’s true, on mobile, you get down to two grid-columns, and the limits are different:
http://vincent.polenordstudio.fr/snap/1s6dj.jpg
If you think about it, if you want to place your content in the grid the same way, it’s a 10px margin you’d need (so it starts at the middle of the gap), not -10px.
Originally, if the columns of the ROW widget are set this way on desktop, it’s because they’re likely used for columns or cards and they will need the grid design. On mobile, the columns are one under another in most of the cases, it’s better to let the user free to set his layout rather than padding by default.
I’m not sure if I know what you mean 
I still think it’s a mistake. The negative margin is there to remove the padding on the columns for each row. I don’t think it should be removed by the framework when the columns are set to 100% width. I think I try contacting support about it.
Hi @schneikai, Could you share the site read-only link: Learn web design with free video courses and tutorials | Webflow University, I am happy to take a look Cheers, Dave
Sure! https://preview.webflow.com/preview/blank-site-to-check-defaults?preview=7acca08253bb89bf4ae2473348ea19f0
Thank you very much!
Hi @schneikai, thanks a lot for the post, I took a quick peek at your test case, and it seems to be working properly to me. The negative margin is removed for mobile landscape and below currently, because at that point we are below 940px, the width of the container, so no need for the negative margins on the row on lower viewports.
You can align your content by adding 10px padding to your title and title paragraph on the lower views to get that aligned the way you want.
I hope this helps. If not, please let me know – I’m happy to assist further!
Cheers,
Dave
But it wouldn’t be necessary to add padding to the elements outside the row if you would keep the negative margin on the row right?
Hi @schneikai, since the negative margin is not used in the row element on mobile landscape or below, you would need to add the padding to your elements outside the row, if you want content outside the row to align. You can also change the padding of the columns to be zero instead of 10 to have the content in the columns align flush to the edge of the page.
If you keep the negative margin on the row on lower views, this does not affect the column content, so you still need to remove the 10px padding on the column, or add 10px padding on the content outside of the columns.
Cheers, Dave
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.