[Support request] Strange behaviour in the Customize-Layout-Container

[Mary]

I noticed that the width had changed for the layout for a site I’m working on.
In Chrome it was fine, full width responsive with a 40 px margin.
But in Firefox and Safari it had changed to 100% full width.
This is after coming back to this development site, after being called away for a couple of months for another project.

I’m noticing an aberration visually in the Container Width, Separating Space and Content Separator dialogue- the blue dot for the slider is on the left – making it difficult to read the width.

I tried setting the Container Width to a higher pixel width like 3000px and adding a 40px margin. (as per a suggestion in another forum response) but that makes the width 100% and no margin. Do I need to reinstall Generate Press?

I can fix it with a css change:
.grid-container {
max-width: 3000px;
margin-left: 40px;
margin-right: 40px;
}

That works but that should be handled by the theme, right?
That is what I have used in the other sites I have developed with GeneratePress.

Thanks for this great theme!

[Leo]

Hi Mary,

I’m a little bit confused about the question.

Can you please remove your own CSS and disable the caching plugin so we can have a closer look at the code?

We have not had any other reports on this so I’d assume it’s something specific to your setup.

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mary]

Hi Leo, I am also a bit confused about the situation.
CSS disabled the caching plugin deactivated.
Thank you,
Mary

[Mary]

I have to put the css back.
I still have the problem, it’s not going away on it’s own.

[Fernando]

Hi Mary,

Sorry, your response somehow slipped through our system.

The spacing added in the Customizer is added as padding. For what you’re trying to achieve, you’ll need to add it through Appearance > Customize > Layout > Container, Header, and Footer – Not just the Container. There are spacing settings in all three.

Paddings produce a different style of spacing in comparison to margins which is what’s used in your custom code. By default, the left and right margins are set to auto so that it extends to the max defined width. Then, the spacing is done through padding.

As mentioned, modifying the spacing through the Customizer in all three sections would do, but using custom CSS if needed for your layout is alright as well if that’s what you prefer. Ultimately, I would recommend trying to modify the spacing through the Customizer settings first, and if it doesn’t work, that’s when you use custom CSS.

[Author]

Posts