Masthead margins

Try going to Settings > Page Builder > Layout > Use Tablet Layout, enable. See if that helps.

Thanks, I actually tried that previously. Unfortunately that messes up the masthead layout.
This masthead has a single 3 column row. The left column is empty, the center column has the logo and the right hand column has the buttons. The tablet mode drops the layout down to two columns and I end up with the empty column on the left and the logo in the right hand column. I would like the logo to remain centered. The buttons also end up on the left hand side which does not look right.

Thanks. If you put it back to the previous layout we’ll try to assist from there.

Ok, I have turned tablet mode back off.

This is untested. Edit the Button widget, click the Attributes tab on the right, insert a class name:

header-margin

Insert in Additional CSS:

@media (max-width: 976px) and (min-width: 768px)  {
	.header-margin {
		margin-right: 5%
	}
}

Thanks for your help, that worked with some changes:

@media (max-width: 976px) and (min-width: 768px) {
.header-margin {
margin-right: 10% !important;
}
}

Also the right hand column is another Layout Builder widget that contains the social media buttons and the subscribe button. I had to set the class name in the attributes tab of the layout Layout Builder widget in the right column, rather than the Subscribe button widget.

Some questions. Why is the button going off the right hand side in the first place? And also why doesn’t setting the right hand margin inside the Layout option of the right hand Layout Builder widget (or the Subscribe button) do anything?

Glad to hear you’ve made progress. The overflow happens because the mobile layout only applies later on at smaller resolutions. There isn’t a rule to wrap those cells until the mobile rule applies. Not sure why setting the right-hand margin didn’t help. I’d have to look at the layout in the admin to investigate that. If you’d like me to do that, please export the layout, Layouts > Import/Export and upload it to a cloud sharing site like https://wetransfer.com/. Thanks.

Hi Andrew
I could not see a way to export the masthead layout, so I created a new test page and copied the row into the new page body margin-test-page
You can download the exported layout here margin-test-page.json

I have removed the attribute Widget Class head-margin from the widget for now.

Looking back at the original page Shop, the other items on the page seem to keep a gap to the edge of the page as the page is reduced in size. However the Subscribe button will start to hit the right hand side before the social media buttons have collapsed fully. Changing the Margin under Widget Styles does not seem to change anything.

Hi dkselw,

We’re not 100% sure why this is happening at this stage but I can spot two possible reasons why the custom widget margin isn’t applying.

The first reason is some CSS in the header:

#masthead #masthead-widgets .widgets .widget:last-of-type {
margin-right: 0!important;
}

Normally that wouldn’t be a problem, but margin appears to be added directly to the widget rather than the padding so it prevents the widget align for the last widget in the masthead.

The second reason for this could be the button itself. The button widget is actually overflowing the cell (meaning it’s bigger than the area allows and to prevent the tet from wrapping, its simply exceeding the width of the cell) is added to allow for it to appear correctly sized with padding.

It looks like you were right about the size of the button. I have reduced the size of the button in the page margin-test-page for testing, and it behaves ok now.
The CSS code should only effect the button in the header. When the row was copied into the body, it behaved exactly the same.
I have removed the CSS code for now, and the only noticeable effect is the large vertical spacing in the header in the mobile view.

• This reply was modified 6 years, 5 months ago by dkselw.

Hi dkselw,

The CSS is only designed to affect the widget in the masthead, if the button looks the same elsewhere it’s due to the button is the same for other reasons – being the width again. Does that make sense?