[Resolved] How to make page background full screen width?

  • Author
    Posts
  • #9549

    MZH
    Participant

    Hi guys,
    I encounter a problem when using Ultra theme. I build my page with elementor page builder, but when i set a background color or image for a section, and set everything to full width, including the page template to full with, but the background just appear as the same width of the content, not full screen, i tried siteorigin pagebuilder as well, still didn’t work.
    How can i make a full screen width background with Ultra theme?
    Your help will be much appreciated.
    Thank you in advance.

    #9551

    Andrew Misplon
    Keymaster

    Hi MZH

    Page Builder should work if you set the Row Layout to Full Width. Elementor should work if you set the Page Template to Default and then further down in Page Settings, set the Page Layout to Full Width or Full Width, No Sidebar.

    Please, send a link to the problem and I’ll take a look. Thanks.

    #9567

    MZH
    Participant

    Hello Andrew,

    Thank you very much for your quick response.
    Here is the link of what i set the Page Template to Default and Page Layout to Full Width,

    About

    But this is not i want, the grey color background of the content section is boxed, not across the screen to be full screen width. I want the content background just like the content header full width background.
    (And also the homepage has the same problem.)

    Do you have any ideas of how to make it?
    Thank you!

    #9568

    MZH
    Participant

    Sorry, i just tried with pagebuilder siteorigin to set the Row Layout to Full Width, and it worked. But not for Elementor.
    Maybe it is the problem of elementor, but siteorigin left its code after disabled, don’t like it this way.
    But how to make full width background with elementor?
    Any ideas about it?
    Thanks!

    #9571

    Andrew Misplon
    Keymaster

    Thanks for the feedback. Try adding the following to Customize > Additional CSS:

    .page-layout-full-width .entry-header ~ .container {
        padding: 0;
    }
    #9581

    MZH
    Participant

    Thanks, Andrew
    I sincerely appreciated your help, and your quick response.
    Although the code doesn’t work for my purpose, but i figured a way to make a full width background with elementor, to set the Layout – Stretch Section – ON, and Content Width to be Boxed, and the adjust the content width.
    By the way, Ultra is a great theme, it is my favorite.
    🙂

    #9583

    Andrew Misplon
    Keymaster

    Awesome, really glad to hear you’ve made progress, that’s great. Let me know if anything else comes up.

    All the best.

    #9599

    MZH
    Participant

    Andrew,

    Thank you very much. 🙂

    I wondered, is there any way to make the Full Width Pagelayout/Template only affect to the page content with Ultra theme?
    Because when i set the page to Full Width Pagelayout/Template, the header, footer and other elements all to be full width, but i only want the page content to be full width, and the other elements stay at the width as the default template.

    I tried to set code as below, so when i choose the Full Width pagelayout, only the page-content to be full width, but it didn’t work for ‘top-bar’. How to make the top-bar to be max-width 1200px?
    .top-bar .container,
    .site-header .container,
    .entry-header .container,
    .site-footer .container {
    max-width: 1200px; }

    Is there a better way to make Full Width only apply to page content?

    (P.S. If this is solved, it didn’t need to set the Elentor to stretch the page background to be full width, JS code is not good for site SEO, i think.)

    #9602

    Andrew Misplon
    Keymaster

    For sure. Set the page layout back to what it was and try:

    .page .site-content .container {
    	max-width: none;
    	padding-right: 0;
    	padding-left: 0;
    }

    That would take effect on all pages but you could change the scope as required.

    (I don’t know that using JS to change content width has any negative impact on SEO.)

    #9613

    MZH
    Participant

    WOW…. I’m so excited, the code worked, my problem solved. Haha…
    Thank you so much!!!
    Andrew, you are the best!!!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Scroll to top