- This topic has 19 replies, 4 voices, and was last updated 8 years, 5 months ago by Tom.
-
AuthorPosts
-
October 8, 2015 at 1:59 am #142747Andreas
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 #142753Adrian CojocariuWell 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 #142764AndreasSorry 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 #142816TomLead DeveloperLead DeveloperYou can remove the section padding like this:
.generate-sections-inside-container { padding-left: 0; padding-right: 0; }
October 9, 2015 at 1:45 am #142980AndreasHi Tom,
thank you for the quick response. Unfortunately, the code does not work for me.
October 9, 2015 at 2:01 am #142984AndreasThe padding comes from
.site-main
so the section container has no padding.October 9, 2015 at 3:33 am #142992AdrianMaybe link us to the website so we can have a look at the code ?
October 9, 2015 at 8:33 am #143058AdrianIf 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 #143060TomLead DeveloperLead DeveloperA link to the page using the Sections would definitely be helpful 🙂
October 10, 2015 at 11:09 am #143294Samit LotlikarHello,
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 #143340TomLead DeveloperLead DeveloperHi there,
Any chance you can link me to the page so I can take a look?
Thanks!
October 11, 2015 at 3:14 am #143400AndreasHi 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 #143411AdrianGlad you worked it out mate !
October 11, 2015 at 4:45 am #143417Samit LotlikarOctober 11, 2015 at 5:23 am #143422AdrianIt 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.
-
AuthorPosts
- You must be logged in to reply to this topic.