[Support request] Best way to acheive left and right padding on the body

[Tim]

Hi,
Love the theme by the way, first time using it!

I have achieved what I am trying to do by adding some CSS but I wasn’t sure if there was an actual setting to accomplish it. If there is a .page-hero I want padding on the #page to be able to see some of the hero image on the outside. I have already bumped up #page element with negative margins. I also don’t want this to happen on the home page as that is set to full-width.

I made it all work with this simple css declaration:

body:not(.home) #page {
  padding: 0 50px;
}

Did I overlook a setting in the customizer…I had thought maybe the content container setting, but I think that is just for the content inside the page.

Appreciate any suggestions on this, Thank you

[Leo]

Hi there,

Any chance you can link us to the site in question so I can see the current layout and provide the best solution possible?

You can use the private information field.

Let me know 🙂

[Tim]

Hi, thanks for the reply…I’ve attached the log in credentials to the local site. I also added a box-shadow and it gives a strange result, as if it’s being applied below the #page or something. I’m a little confused.

Thanks

[Elvin]

Hi,

Can you specify the look you’re trying to achieve?

To clarify: Do you want to reduce the #page’s display width? If so, consider using max-width.

[Tim]

I am trying to get this look – here

It has a max-width or margin: 0 auto, but maintains the space on left and right even on mobile

Thanks

[Elvin]

I am trying to get this look – here

Thanks.

It has a max-width or margin: 0 auto, but maintains the space on left and right even on mobile

It maintains the space using padding because the section is styled without a background color.

There are many ways to keep this space on mobile.

Try this:

/* desktop and tablet horizontal spacing */
body:not(.home) #page {
  padding: 0 50px;
}
/* Mobile horizontal spacing */
@media (max-width:768px) {
body:not(.home) #page {
    padding:0 20px;
}
}

Alternatively, you can also go the max-width way:

/* desktop and tablet horizontal spacing */
body:not(.home) #page {
   max-width:90%
}
/* Mobile horizontal spacing */
@media (max-width:768px) {
body:not(.home) #page {
    max-width:90%
}
}

And yes, this isn’t set within the customizer. You’re right to have written a Custom CSS code for it. 🙂

[Author]

Posts