Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Layout style problem

Home Forums Support Layout style problem

  • This topic has 19 replies, 4 voices, and was last updated 5 years ago by Tom.
Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #142747
    Andreas

    I use the following code to change the style for mobile

    @media (max-width: 1279px) {
          	.site-main {
                	padding-left: 20px !important;
    		padding-right: 20px !important;
          	}
    }

    On my front page I used a full width section container with an image. When I apply the above code, I can’t change the widht of the section container to full width.

    I use this code

    @media (max-width: 1279px) {
    	#generate-section-1.unique-section-class {
    		width: 100% !important;
    	}
    }

    Could anybody help me?

    Thanks in advance

    #142753
    Adrian Cojocariu

    Well it is full width, it’s just the padding that makes it not full width.

    The section is included in the site-main div, so you have a 100% width section inside a div with 20 padding right and 20 padding left.

    If I got you wrong, try

    
    @media (max-width: 1279px) {
    .unique-section-class .generate-sections-inside-container {
    width:100% !important;
    }
    }
    

    But from what you say, you can’t really get a full width container which is included in a 20px padded site-main div.

    #142764
    Andreas

    Sorry my mistake. I want to remove the padding vor the section container. Or is there a other way to solve my problem?

    #142816
    Tom
    Lead Developer
    Lead Developer

    You can remove the section padding like this:

    .generate-sections-inside-container {
        padding-left: 0;
        padding-right: 0;
    }
    #142980
    Andreas

    Hi Tom,

    thank you for the quick response. Unfortunately, the code does not work for me.

    #142984
    Andreas

    The padding comes from .site-main so the section container has no padding.

    #142992
    Adrian

    Maybe link us to the website so we can have a look at the code ?

    #143058
    Adrian

    If you use the @media for mobile, why you set 1279px max width ?

    It’s too big, change it to 769

    #143060
    Tom
    Lead Developer
    Lead Developer

    A link to the page using the Sections would definitely be helpful 🙂

    #143294
    Samit Lotlikar

    Hello,

    This could be really straight forward but somehow I cant find the solution to the problem.

    I have enabled Sections on one of my Page, This page has 2 sections.I have set the section box type to fluid and the inner box type to container, But my Sections do not stretch to the side edges of the browser and only shows the container .

    Any ideas on how this can be resolved.

    Thanks

    #143340
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Any chance you can link me to the page so I can take a look?

    Thanks!

    #143400
    Andreas

    Hi guys,

    I found a solution for my problem

    @media (max-width: 1024px) {
          	.one-container .site-content,
          	.separate-containers .inside-article,
    	.grid-container .generate-sections-inside-container {
                	padding-left: 20px;
    		padding-right: 20px;
          	}
    }

    thanks for the good and fast support!

    #143411
    Adrian

    Glad you worked it out mate !

    #143417
    Samit Lotlikar

    Hi Tom,

    http://techrootz.com/

    Check the Red Box

    and the section below it.

    Thanks

    #143422
    Adrian

    It must be some css overwriting, maybe giving it a max-width property or something.

    What plugins are you using ? I see you use bootstrap. That can usually overwrite CSS.

    Can you try disableing some plugins that might use CSS and see if it works ?

    Basically if you set the red background color from the Section editor, if the Box Type is fluid, the background should be full width.

    BUT first, please make sure you are running the latest version of GeneratePress Theme and GP Premium.

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