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

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

Home Forums Support Simple way to add padding to a site for smaller screens?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1614850
    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?

    #1615062
    Leo
    Staff
    Customer Support

    Hi there,

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

    You can use the private information field.

    Let me know ๐Ÿ™‚

    #1615129
    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.

    #1615168
    Elvin
    Staff
    Customer Support

    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;
        }
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1616218
    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.

    #1616457
    Elvin
    Staff
    Customer Support

    Nice one. Glad you got it sorted. ๐Ÿ™‚

    A wise man once said:
    "Have you cleared your cache?"

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.