[Resolved] Simple way to add padding to a site for smaller screens?

[Samuel]

I feel like I am overthinking this. I am trying to do something very simple: add 40px padding left and right when the screen drops below 1200px. I applied the padding to the #page element but I have run into one problem: any container blocks that are set to full width within the #page element are of course affected by the padding as well. Is there a simple way to add 40px left and right padding to the page content but exclude any full width blocks?

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Samuel]

I’ll have a test up by Friday, I could add I then if it helps. Here’s what I’m using now:

.   #page, 
    .site-header {
        padding-left: 40px;
        padding-right: 40px;
    }

It works great except for pages where there is a full-width container. Obviously I’d like full-width containers to continue to go full-width.

[Elvin]

Hi there,

To give a more accurate solution, we really need to see the site to inspect its class selectors.

But generally, if you want to apply specific CSS to smaller screens, you use @media rule.
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Say for example, you want the CSS you’ve written to apply to mobile viewport, you’ll have to write something like this:

@media(max-width:768px){
 #page, .site-header {
        padding-left: 40px;
        padding-right: 40px;
    }
}

And you can actually specify multiple @media rules for different viewports.

Example: 40px padding on mobile, 30px padding on tablet and small desktops, 0px padding on desktops larger than 1024px.

@media(max-width:768px){
 #page, .site-header {
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media(min-width:769px) and (max-width:1024px){
 #page, .site-header {
        padding-left: 30px;
        padding-right: 30px;
    }
}
@media(min-width:1025px){
 #page, .site-header {
        padding-left: 0px;
        padding-right: 0px;
    }
}

[Samuel]

For now I think I’ve solved it using the following within a media rule of course (posting here in case it helps anyone else):

    #page, 
    .site-header,
    .full-width-content #page .gb-container {
        padding-left: 40px;
        padding-right: 40px;
    }
    .full-width-content #page {
        padding-left: 0;
        padding-right: 0;
    }

This adds padding to the page element by default, removes it if there are full width blocks on the page, for those there is. rule to apply the padding any gb-containers that are presumably full width.

[Elvin]

Nice one. Glad you got it sorted. 🙂

[Author]

Posts