[Resolved] Layout style problem

[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

[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.

[Andreas]

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

[Tom]

You can remove the section padding like this:

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

[Andreas]

Hi Tom,

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

[Andreas]

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

[Adrian]

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

[Adrian]

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

It’s too big, change it to 769

[Tom]

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

[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

[Tom]

Hi there,

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

Thanks!

[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!

[Adrian]

Glad you worked it out mate !

[Samit Lotlikar]

Hi Tom,

http://techrootz.com/

Check the Red Box

and the section below it.

Thanks

[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.

[Author]

Posts