Archived topic

Best way to acheive left and right padding on the body

5 replies · Started by Tim on November 9, 2020

Viewing posts 1–6 of 6

November 9, 2020 at 12:54 pm #1524462

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

November 9, 2020 at 1:37 pm #1524497

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 :)

November 9, 2020 at 1:44 pm #1524510

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

November 9, 2020 at 2:12 pm #1524537

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.

November 9, 2020 at 3:00 pm #1524570

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

November 9, 2020 at 3:52 pm #1524610

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. :)

This archived topic is closed to new replies.

Start building better websites today.