class “container” width

  • Resolved terry777

    (@terry777)


    9 years, 5 months ago

    Hi, I’m new to your theme, and am using the “default” template for the home page, full-width responsive layout. The slider is full-width, but the containers for the menu and page content are not full-width, on my 1280 width screen they’re indented from the slider, which looks odd. If I try the “boxed” layout, the slider is narrowed to match the container width. Is there a setting I’m missing? It’s the free version, not the paid version.

    Thanks, so far I’m liking your theme. It’s always dicey trying a new theme!

Viewing 13 replies - 1 through 13 (of 13 total)
  • Theme Author Andrew Misplon

    (@misplon)

    9 years, 5 months ago

    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/)

    Thread Starter terry777

    (@terry777)

    9 years, 5 months ago

    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 9 years, 5 months ago by terry777.
    Thread Starter terry777

    (@terry777)

    9 years, 5 months ago

    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 9 years, 5 months ago by terry777.
    • This reply was modified 9 years, 5 months ago by terry777.
    Theme Author Andrew Misplon

    (@misplon)

    9 years, 5 months ago

    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.

    Theme Author Andrew Misplon

    (@misplon)

    9 years, 5 months ago

    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.

    Thread Starter terry777

    (@terry777)

    9 years, 5 months ago

    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!

    Theme Author Andrew Misplon

    (@misplon)

    9 years, 5 months ago

    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/

    Theme Author Andrew Misplon

    (@misplon)

    9 years, 5 months ago

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

    (@terry777)

    9 years, 5 months ago

    I’ll check this, thanks.

    Thread Starter terry777

    (@terry777)

    9 years, 5 months ago

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

    Thread Starter terry777

    (@terry777)

    9 years, 5 months ago

    Was that css INSTEAD of setting the padding to zero?

    Thread Starter terry777

    (@terry777)

    9 years, 5 months ago

    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 9 years, 5 months ago by terry777.
    Theme Author Andrew Misplon

    (@misplon)

    9 years, 5 months ago

    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 🙂

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘class “container” width’ is closed to new replies.