class “container” width

Hi @terry777

Thanks for reaching out.

By default, the site’s content is constrained in the full-width layout. Sorry for any confusion caused, The difference between full-width and boxed is that the header and footer backgrounds run full-screen width in the full-width layout.

I recently added Page Settings. You’ll find Page Settings when you edit a page, in the right column. There, it is possible to use the Layout drop-down to set the page to true full-width. This is only on a page by page basis though.

What you could do is head over to Appearance > Customize > Additional CSS (WordPress 4.7) and insert the following:

/* Container */
.container {
    max-width: 95%;
}

Let me know if that helps ??

(Theme documentation is here if you need it: https://purothemes.com/documentation/ultra-theme/)

• This reply was modified 8 years, 3 months ago by Andrew Misplon.

Thanks for the prompt reply!

I put the css in the site-wide css (I’m using the Add Custom CSS plugin), and on the home page selected full width from the page layout drop-down, but while the header and footer content is now full-screen, the page content is not. In firebug, I see that one row containing text seems to be set to a fixed width class: <div class=”fl-row fl-row-fixed-width fl-row-bg-color fl-node-58473eed349af” data-node=”58473eed349af”>.

Note that GoDaddy installed this wordpress with “Beaver Builder” while my test site that I was originally using your theme to test with uses “Site Builder” by Origin. I wonder if that makes a difference? When I installed your theme on my test site, I think it installed Site Builder by Origin, is that right?

I wonder if that’s the problem, some incompatibility between your theme and Beaver Builder? Have you ever used your theme with Beaver Builder? When I look at my test site, the content is wider.

This is my first experience using a “page builder” rather the “regular” wordpress interface.

• This reply was modified 8 years, 3 months ago by terry777.

Ok, I found that the page builder rows have a setting for fixed width vs full width, and that makes them wider. Problem solved, I think. What is the max-width for container by default? Can I set it to 100%? It looks like it has a left and right padding of 25, which, because I have a background color for a row, the row’s background color doesn’t span the whole page. Is there any reason I can’t set the padding to 0 for the container?

• This reply was modified 8 years, 3 months ago by terry777.
• This reply was modified 8 years, 3 months ago by terry777.

Super ?? Glad you’ve made progress.

For anyone else reading, you can make Page Builder by SiteOrigin rows full-width or full-width stretched by editing the row (click wrench icon) and then clicking Layout on the right and adjusting the Row Layout drop-down menu.

For the question of full-width and Beaver Builder, please, see: https://purothemes.com/support/topic/full-width-ultra-theme/

All the best.

As long as you’re setting the row background color in row settings and not widget settings, the row background should reach the edge of the screen in both Page Builder full-width and full-width stretched mode.

Actually I set the site-content container to have no padding, as setting the container threw off the header and footer as well:
.site-content .container {
padding: 0 0 0 0;
}

We’ll see how that goes. Thanks again for your prompt reply!

To be clear though, if you see fl-row in your markup, that means you’re using Beaver Builder not Page Builder by SiteOrigin in which case my advice re: settings etc. doesn’t apply and you should see the following for help with full-width Beaver rows:

https://purothemes.com/support/topic/full-width-ultra-theme/

/* Ultra Beaver Site Content */
.fl-builder .site-content .container {
    max-width: none;
}

I’ll check this, thanks.

so max-width: none; is that the same as full width?

Was that css INSTEAD of setting the padding to zero?

Never having used a page builder before, is there an advantage of one over the other, other than when communicating with you and/or others on the forum it might be easier?

• This reply was modified 8 years, 3 months ago by terry777.

So there are two questions here. The first question is you wanted to know how to make the entire site full-width, the header and footer. Ultra can’t do that by default so for that you need:

/* Container */
.container {
    max-width: 95%;
}

It’s optional to use a Page Builder. If you want to use Beaver Builder and you want to use Beaver full-width rows then you also need this Custom CSS:

/* Ultra Beaver Site Content */
.fl-builder .site-content .container {
    max-width: none;
}

If you instead use Page Builder by SiteOrigin, the above isn’t necessary as Page Builder by SiteOrigin uses negative margins for full-width rows so the CSS isn’t required.

I haven’t spent much time using other Page Builders so unfortunately, can’t comment on which one is better.

Hope the above helps ??