When I create a full width row with fixed width content (such as with a heading or text editor module for the content of the row), the content doesn’t align properly with the left edge of the other fixed width rows. With the default padding and margin settings, it looks good at medium and small page sizes, but it doesn’t align correctly on larger sizes when the width of the screen is wider than the max content width.
The full width row with fixed width content pokes out about 60 pixels to the left of where the other fixed width rows begin.
The normal full width rows align so nicely at all sizes, both with each other and with the site’s menu. I’d love to be able to use full width rows with fixed width content and have the left edge of the content share that exact same alignment. I haven’t been able to figure out how to accomplish this. If I tweak the margins and padding to get it to align at one device size, it breaks the alignment at other sizes.
Any suggestions on how to get the left edge of full width rows with fixed width content to align perfectly with fixed width rows AND with the left edge of the menu area?
Alternatively, is there a way to tweak the CSS to create a fixed width row with a colored background and have the background color fill out to the left and right edges of the screen? That’s the only reason I’m trying to use full width rows in some places – to get the background color across the full width of the screen. I always want the content to be fixed width.
I had expected that the content area of a fixed width row AND the content area of a full width row with fixed width content would align identically at all device sizes. It surprised me that they don’t align on the largest device size.
I’m creating a full width site with the BB theme.
Not really sure I’m following you here. Do you mind sharing a screenshot so we can take a look? You can upload it to imgur and paste the link here. Or if you can share the URL of the site we’ll be glad to take a look.
Alternatively, is there a way to tweak the CSS to create a fixed width row with a colored background and have the background color fill out to the left and right edges of the screen?
This isn’t possible with a Fixed Width row since we won’t have control over that area.
Here’s a screen shot to show the alignment problem:
You’ll see that the headline and the Welcome text align perfectly with the title logo and with each other. These areas are fixed width rows.
The “Core Principles” section is a full width row with fixed width content, so it can have a colored background that covers the full width of the screen. But notice that the content sticks out to the left about 40 pixels. It doesn’t align with the content of the other fixed width rows.
If I reduce the width of the screen though, then the content that sticks out to the left will eventually pull itself back into alignment with the other segments once the screen area is thin enough. It’s only at the larger screen size that it sticks out like this.
The margins and padding settings are the BB defaults for the left and right sides.
If I add more margin or padding to the row or to the content areas in the colored region, then I can get it to align perfectly when the screen is this wide, but then they won’t align at thinner widths because the extra margin or padding space will cause the colored area’s content to start indenting further to the right instead of the left. So either way it doesn’t align.
My goal is to get this colored content area to align perfectly with the other fixed width rows for all screen sizes.
I’m using the latest BB theme (with a child theme) and the latest BB page builder.
Are you able to reproduce this problem?
All I want to do is get these different content areas to line up on their left edges at all screen sizes. How can I accomplish this?
I’m not able to reproduce the same problem on my end. I created 2 rows, first one being a fixed width row, second one a full width row with fixed width content and they’re aligned with each other. The CSS selector for the fixed width row and fixed width content are the same so they have similar max-width values. The only reason they wouldn’t be aligned is if there is some padding/margin/border or custom positioning CSS applied to the elements. Is the site on a live/staging URL? I’d certainly love to take a look at what’s going on there.
I don’t have the site on a staging server yet, but I could probably get it online later this week.
I found that it wasn’t due to any CSS customizations or other plugins. I disabled my custom CSS changes and turned off every plugin except BB page builder, and the problem still occurs.
However, I noticed that when I disabled the BB plugin too, the content actually appears perfectly aligned at all sizes. It looks ugly without the plugin active, but the left size does align perfectly when the plugin is off. So the problem seems to have something to do with the BB plugin.
I also tried other theme presets and variations, and the problem still occurs as long as I use a full width layout and not a boxed layout.
I’m able to reproduce the problem on Chrome, Safari, and Firefox.
I’ve seen this problem since I first started using BB, probably in September, so it was happening from the get-go.
If/when I get the site onto a staging server, I can send you a link to check it out.
I finally got this working.
The key to making it work was that I had to add some left-padding to the column setting for the fixed width content inside the full width row. I didn’t even notice the column margins and padding settings at first since the area was a single column only. I couldn’t get it to work by tweaking only the row and content margins/padding. But when I found the column settings, I just had to get the right number there, and now everything aligns at all sizes.
I was starting to think that was the case, but wanted to be sure so I asked for the site URL. Anyway, glad you figured it out! Enjoy!