Archived topic

Layout style problem

19 replies · Started by Anonymous on October 8, 2015

Viewing posts 1–15 of 20

October 8, 2015 at 1:59 am #142747

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

October 8, 2015 at 2:17 am #142753

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.

October 8, 2015 at 2:58 am #142764

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

October 8, 2015 at 10:02 am #142816

You can remove the section padding like this:

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

October 9, 2015 at 1:45 am #142980

Hi Tom,

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

October 9, 2015 at 2:01 am #142984

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

October 9, 2015 at 3:33 am #142992

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

October 9, 2015 at 8:33 am #143058

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

It's too big, change it to 769

October 9, 2015 at 9:21 am #143060

A link to the page using the Sections would definitely be helpful :)

October 10, 2015 at 11:09 am #143294

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

October 10, 2015 at 5:44 pm #143340

Hi there,

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

Thanks!

October 11, 2015 at 3:14 am #143400

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!

October 11, 2015 at 3:53 am #143411

Glad you worked it out mate !

October 11, 2015 at 4:45 am #143417

Hi Tom,

http://techrootz.com/

Check the Red Box

and the section below it.

Thanks

October 11, 2015 at 5:23 am #143422

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.

This archived topic is closed to new replies.

Start building better websites today.