[Resolved] Pages displaying as full width

[Yvonne]

I just installed GP yesterday and then updated to Premium last night. I’m loving the theme so far but my pages seem to be displaying as full width and for the life of me I can’t figure out how to change it.

My layout settings are:

Container width: 1000 px
Content layout: separate containers
Sidebar layout: content / sidebar
Blog sidebar layout: content / sidebar
Single post layout: content / sidebar
Header, navigation and footer width are all set to full

I though there might be an option in Edit page to change the page width but I can’t see it.

Can anyone tell me what I’m doing wrong please?

[Tom]

Hi there,

Any chance you can link me to your website so I can see?

[Yvonne]

Hi Tom

How do I link you to my site please?

[Tom]

You can post it in here or email it to me at support@generatepress.com.

[Yvonne]

Hi Tom

I’ve just emailed it to you.

Thank you!

[Tom]

This is because of Beaver Builder.

In most cases, people use BB to create full page layouts.

However, I’ve been seeing more and more people using it just for the columns.

In the next version of GP I’ve made it so the container will only go full width if no sidebars are selected.

For now, try this CSS:

.fl-builder .container.grid-container {
    max-width: 1200px;
}

.fl-builder.no-sidebar .container.grid-container {
    max-width: 100%;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

[Yvonne]

Wow, thanks Tom, that worked! I’m very impressed with the level of support!

[Tom]

Glad I could help! 🙂

[David]

Hi Tom,
I just purchased, and I’m a Beaver Builder user.
But I can’t seem to get it to go full width.
I’ve added your CSS above, but I’m getting padding all round.
This is my demo page:
http://southperthcomo.info/bbplay/

TIA, Dave

[David]

I searched further on the forums and found this:

.fl-builder .entry-header, 
.fl-builder .synved-social-container, 
.fl-builder footer.entry-meta, 
.fl-builder .comments-area,
.fl-builder.archive .container.grid-container,
.fl-builder.blog.container.grid-container {
    max-width: 1980px;
}

I then still had padding all round, so I then used developer tools to add this:

.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content {
    padding: 0px 0px 0px 0px;
}

Not sure if this is all required, but for now it seems to work OK
Thanks, Dave

[David]

Actually that is still not working – I’ve tried several css solutions, but now I have a top gap above the content – see link I posted above..
Thanks, Dave

[Tom]

Hi Dave,

None of that should be necessary since you have the layout set to no sidebars.

The page look great to me, did you figure it out?

Let me know 🙂

[David]

Thanks Tom,
Not sure, I switched another site to GeneratePress and didn’t have an issue at all, so leave it with me and I’ll double check that first one…
Cheers, Dave

[Tom]

No problem – I’ll be here 🙂

[David]

Hi Tom,
The second theme I started switching to is this one:
http://touchstonesoftware.com.au/ihs/

On the home page, you will see a white row above the footer – I can’t figure out what is causing this ?
TIA, Dave

[Author]

Posts