dkselw

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 8 years ago by dkselw.

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?

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.

Hi Andrew
I added the CSS code you suggested, however it did not appear to change anything.