Make single section full-width

Support
#1

Hi,

Is there a way to make a single section full-width in a boxed-layout post? I want the background-color to be edge-to-edge.

Here are my layout- settings:

I tried creating a custom-class for this section but even the !important does not override the 95%.

If that is not possible, can I set the site-width to 100% then target all sections to be max-width:95%; and then just exclude the ones I want to be full-width via custom class? If so, what would be the best way to accomplish that :slight_smile: ?

Thanks

#2

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL and the admin details in a secure note if your site has an under construction page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#3

Thanks for your answer. Please find the details above.

#4

Hi there,

I tried to access your website dashboard but there is an error of the Too Many Redirects:

Please contact your hosting service provider and ask them to follow up the case for you.

From what I see in the original message I suggest that you follow the second solution by having a 100% width and forcing other sections to be 95%. But I do not suggest that you do it from the Theme Options.

I suggest that you go to that specific page in question and add a unique class to the body in the page options for example thefullwidth:

Then you can add the CSS code below to X > Theme Options > CSS to make the page 100%:

.thefullwidth .x-container.width {
    width: 100%;
}

Then you can go to each section which you want to be 95% and click on the Customize tab and add the smallwidth class:

Then go to X > Theme Options > CSS and add the CSS code below:

.smallwidth {
    max-width: 95%;
    margin: auto !important;
}

That should do the trick. Thank you.

#5

Hi,

Thanks for your hint about the redirects. Maybe it was because I was logged in and had a lot of stuff working simultaneously… I had no such issue so far, but I’ll contact the host about that.

The CSS you provided did the trick, thank you.

Thing is that will probably be the basic layout for nearly all posts. That is the reason I intended to do it from the Theme-Options and tried to target just this one section.

If there is another solution I’d be thankful.

#6

Hi There,

If you want to apply it to all single posts, try adding the following CSS rule into your Theme Options > Global CSS area.

.single-post .x-container.width {
    width: 100% !important;
}

Hope that helps.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.