Ultra: full width on specific pages

Hi @pcfritz

Thanks for reaching out. There isn’t currently a real full width page template in Ultra. Perhaps I should add one. If you’re using Page Builder on the pages in question then you can set rows to be true full width.

Edit Row > Layout > Row Layout

I created a quick video on using full width row layouts in Page Builder here: https://www.youtube.com/watch?v=zpQJr8X_oSA

Let me know if that helps 🙂

Sorry about that. I was trying to correct for another situation but see the problem and have removed the problem CSS rules in the next update. For now please, insert the following hotfix:

/* Page Builder Row Styles: Remove after next Ultra update */
.siteorigin-panels-stretch[data-stretch-type*="full-stretched"] .panel-grid-cell:only-of-type .widget {
  padding-right: 0;
  padding-left: 0;
}

If you’re using a child theme this can be added to the style.css of your child theme. If not, you can use a plugin like Simple Custom CSS: https://wordpress.org/plugins/simple-custom-css/. Once activated paste the above at Appearance > Custom CSS.

If you’re making use of Jetpack go to Jetpack > Settings and activate Jetpack Custom CSS instead. Once activated go to Appearance > Edit CSS.

Let me know how that goes 🙂 Thanks.

The CSS at the following link are the only changes you’ve made to style.css. If you paste these rules into the field at Appearance > Custom CSS once Simple Custom CSS has been activated, your changes will be upgrade safe.

https://gist.github.com/Misplon/225c276b92ebd856ea24

No problem. In this instance it’s ok to rely on editing style.css directly because I’ll move remove this rule in the next update. Just a quick reminder to paste the styles listed at my GitHub link into the field at Appearance > Custom CSS once Simple Custom CSS has been activated. Thanks 🙂

Hi @dramaka

Thanks for reaching out.

Let’s try a Custom CSS solution. If you don’t already have a Custom CSS plugin installed, please, install SiteOrigin CSS. Next, go to Appearance > Custom CSS and insert:

/* Header */

.site-header .site-branding-container {
	max-width: 35%;
}

.main-navigation {
	max-width: 65%;
}

To allow your site title more space to render, adjust the percentage values. Whatever you add to the first value (site title space), you must subtract from the second value (main menu space).

To center the site title a bit more we could try making the overall site width a bit less. Perhaps 960px. To try that, add the following to Appearance > Custom CSS:

/* Full Width Inner Container */

.container {
	max-width: 960px
}

Let me know how that goes.

(For any questions after this one, please, open a new support thread. Thank 🙂 )

Hi @rabanadas

Great to hear from you, I’m sure I can help. This support topic is resolved, would you mind opening a new one so that I can assist further?

Thanks 🙂