Container on mobile has no padding

Design help General
1

I’m trying to understand the behaviour of the Webflow container.
On desktop and tablet the container has a default padding of 16px left and right.
But on mobile there is no default padding. Why not?

I know that I can add padding on mobile, and then give that class name to every Webflow container, but that doesn’t make sense to me. I might as well make a div class for the whole thing.

What is the reason for the lack of padding in containers in mobile?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey @Jonathan_Holden :wave:

I’m not sure what you mean here, sorry if I’ve misunderstood. The default container has no margin or padding set. Where are you seeing the 16px left and right padding? :thinking:

Image 2020-03-31 at 7.16.51 pm
Image 2020-03-31 at 7.16.51 pm384×872 22.4 KB

3

No, it’s baked in to the Container class in Webflow

4

The code has:

.w-container {
margin-left: auto;
margin-right: auto;
max-width: 940px;
}

@media screen and (max-width: 991px)
.w-container {

  1. max-width: 728px;
    }

@media screen and (max-width: 479px)
.w-container {

  1. max-width: none;
    }

So why does margin:auto make NO margin on smaller devices?

Margin auto =
## The auto Value

You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

5

Actually, now that I had another look at a container element - there were never any paddings. The spaces at the sides is because the containers has a certain max-width which is different on desktop and tablet and there is no max-width on lower breakpoints.

6

You’re right. Margin auto is kind of a non-margin.

So now the problem is, what’s the max-width for smaller viewpoints to create the margin effect.

I kind of like the Container box as a way of working… but it annoys me on mobile… grr…

7

you would be better off placing your containers inside a wrapper that would have paddings itself making sure you never bump into the window borders.