No Sidebar & Sidebar template widths not the same

I’m confused why the content width of the sidebar layout seems different than the fullwidth template?

Compare:
http://test.lajollaivf.com/testimonials/
to
http://test.lajollaivf.com/about/

Using Chrome on Mac.

Hey aedesign,

Thanks for getting in touch! I compared both side by side or top/bottom and there actually isn’t a difference. Could just be an optical illusion as one has content while the other doesn’t. :slight_smile:

Best,
Billy

Check it out and thanks so much for the quick response!

http://www.awesomescreenshot.com/image/618008/eb0c4a69575ab1a7861ad4af4bc9bcf9

http://www.awesomescreenshot.com/image/618009/ab306ea7cf7dd783e77bac847671ef62

Would you mind shooting us temp admin access so I can take a look? Please use the private reply option below!

Best,
Billy

It seems like if I change this default CSS, all is well:

@media (min-width: 1100px)
.fl-full-width .container {
padding-left: 0;
padding-right: 0;
width: 1200px;
}

Now I’m juts struggling to get the padding consistent on rows on mobile devices.

[Content Hidden]

[Content Hidden]

No worries! Unfortunately, those creds aren’t working for me. Can you please check and resend?

[Content Hidden]

Haha, no worries at all! Thanks for the shoutout on FB! :slight_smile:

Ok, so I see the issue. You are using the default page template on the testimonials page, but the sidebar page template on the about page. I would actually recommend just going with the default page template on the about page as it would give you more control anyway and we have a row layout with sidebar that you can customize to your heart’s content! :slight_smile:

The sidebar page template has a set width while the default does not. If the above doesn’t necessarily work for you, you could always create your own page template and adjust the width.

Best,
Billy

I just implemented that and I’m still seeing the same level of funk: http://www.awesomescreenshot.com/image/618114/9f7299784d5173ae3829c4f3fe9f6a42

The goal is just to get the header, footer and main content widths the same. Ultimately I would like everything at 1200px on desktops.

Ah, I see. So, this isn’t really an issue with the content. You are more looking to get everything aside from the content at 1200px wide. Not a problem, check out our theme CSS reference docs. Those should get you headed in the right direction to adjust each to your liking! Let me know if I can assist further and enjoy BB! :slight_smile:

Best,
Billy

Hey April,

Just wanted to check back in to see how you got along with the CSS reference. Let us know if we can assist further, we’re happy to help with CSS snippets if needed!

Best,
Billy

Thanks for the follow up. I guess I’m just confused why the widths wouldn’t be equal by default? I understand that the default is 1024 (I believe), but why wouldn’t all the templates be the same width including the header, footer and content?

Seems a lit’ strange that I would have to customize them to be so every time?

Hey April,

Our theme has a default width for base things like the header and footer hence that being hardcoded in. Most themes operate that way, but having a way to change that in the customizer isn’t a bad idea! Feel free to add that in our User Voice forum if you like. For now though, you’ll need to adjust the defaults with CSS.

Best,
Billy

I think I complicated this thread by mentioning that I would like the default o be larger. But the root issue is why they aren’t all equal widths now (be default). Why would the content area be wider than the rest of the page?

Hey April,

Technically, everything is the same width by default, but you have the ability to widen the content area with the page builder tools as you have done in your site. The header and footer remain at the theme defaults hence needing CSS to accomplish something different there if that makes sense.

Best,
Billy

I just realized that everyting looks solid and the same width until I get to a screen size larger than 1600px.

That’s weird. I just took a look at the site and moved around a few pages, etc. and couldn’t see a change. Perhaps, caching?

Best,
Billy

I customized the CSS like this:

.fl-row-fixed-width {
max-width: 1064px;
padding: 0 20px;
}

and then switched up multiple media queries to get is rockin’ on every device.

I can always customize CSS, it just feels like a rabbit hole sometimes and just wanted to know how to approach this correctly moving forward. It seems like something I’l have to continue to do although it seems unnecessary (but I am a picky designer).

Note that if you chose not to use the page builder layout, the width is fine on full width layouts. It is only funky when using full width and page builder.