[Resolved] Left padding on blog page larger than right in mobil view

[shorshe]

Hi,

I’m using the 2 column + masonry layout for the blog page on: land-one-eltern.de.

I’m happy how this looks on large screens. In mobile single column view however there is a pretty large padding on the left (I’m using mobile Safari). I can’t find a way to change this in customizer.
I think I need help with this.

Thanks!

Georg

[Leo]

Hi there,

Have you tried clearing and disabling the caching plugin as we requested here?
https://www.screencast.com/t/cPh1dY1vcmm

Let me know 🙂

[shorshe]

Yes, this is the first thing I do with every design change.

The class in question seems to be “.generate-colums”. This adds 30px padding on the left. Which is fine for the right column.
In single column view this is added to the single column.

I could remedy the situation with this css snippet:

@media only screen and (max-width: 768px) {

	article.generate-columns {
		padding-left:0;
	}
}

In my opinion this should be default for mobile.

[Leo]

Think I’ve seen this issue before and it was caused by the caching plugin.

Can you remove the code, clear and disable the caching plugin and let us have a look?

[shorshe]

You are right and sorry for not doing exactly what you said.

Autoptimize seems to be the culprit.
My hunch is, that they somehow change the css order in this process. I had to target the class overly specific to get results.

I’ll try to file a bug with Autoptimize.

Thanks a lot!

[Leo]

Using our recommended settings here should fix it:
https://generatepress.com/fastest-wordpress-theme/

Let me know 🙂

[shorshe]

Hi Leo,

I checked my settings against your recommended config. They were identical with the recommendation (except for Google font handling).

I think the order of the css files is changed when they are combined by Autoptimize. Resulting in a modified specificity.
I had to modify some of my custom css to be overly specific to get the changes displayed.

[Leo]

Sounds good 🙂

[Author]

Posts