How to create full-width SiteOrigin Hero Unit in Moesia?

I am using the excellent Moesia theme with recommended PageBuilder, and this led me to SiteOrigin’s Widgets Bundle.

I’d like to apply a full-width hero unit to a page, but am running into difficulties.

Specifically the following div

<div class="so-panel widget widget_sow-hero panel-first-child panel-last-child container" id="panel-1450-0-0-0">

and CSS

panel.widget {
    margin: 0 auto;
    padding: 80px 30px;
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

which is setting a max-width to the image and adding surrounding white space.

I could apply a CSS hack to fix this. But am I overlooking something?

Is there an easy way to ensure that a PageBuilder row and it’s hero unit are displayed full-width within the Moesia theme?

I am using WidgetsBundle and PageBuilder with Moesia. I applied a pre-built PageBuilder layout (the Adventure layout) and the frontpage template to the page.

Hello there,

If you want to create another full width page (not front page), you have to set the template of the page attribute as “full width”.

with page attribute “full width”, your page will not displaying the sidebar. But the page is not totally stretched. So, you might use the following css code to make it really full width:

.page-template-page_fullwidth .site-content {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

Thanks Awan. Why can’t the frontpage template be used on multiple pages?

Hi @andrewharvey

My apologies for my previous reply, actually there is two option on create a full-width page. You can choose “front page” or “Full width” for the page attribute but there is different on both page attribute:

  • Front page: your page with totally stretched and no sidebar.
  • Full width: your page displaying full width but with margin in left-right and no sidebar.

And it should work fine when you create as many pages as needed.

So, you can try to change the page attribute to “Front page” and remove the css code that I gave to you in above.