- This topic has 9 replies, 2 voices, and was last updated 6 years, 5 months ago by MZH.
Tagged: full screen width
- AuthorPosts
- April 26, 2018 at 1:22 pm #9549
MZHParticipantHi 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.April 26, 2018 at 1:26 pm #9551
Andrew MisplonKeymasterHi 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.
April 27, 2018 at 1:21 am #9567
MZHParticipantHello 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,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!April 27, 2018 at 1:39 am #9568
MZHParticipantSorry, 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!April 27, 2018 at 9:28 am #9571
Andrew MisplonKeymasterThanks for the feedback. Try adding the following to
Customize > Additional CSS
:.page-layout-full-width .entry-header ~ .container { padding: 0; }
April 28, 2018 at 1:10 am #9581
MZHParticipantThanks, 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.
🙂April 28, 2018 at 9:29 am #9583
Andrew MisplonKeymasterAwesome, really glad to hear you’ve made progress, that’s great. Let me know if anything else comes up.
All the best.
April 30, 2018 at 5:29 am #9599
MZHParticipantAndrew,
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.)
April 30, 2018 at 9:39 am #9602
Andrew MisplonKeymasterFor 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.)
May 1, 2018 at 4:03 am #9613
MZHParticipantWOW…. I’m so excited, the code worked, my problem solved. Haha…
Thank you so much!!!
Andrew, you are the best!!! - AuthorPosts
You must be logged in to reply to this topic.