Site logo

Archived topic

Left padding on blog page larger than right in mobil view

7 replies · Started by shorshe on May 19, 2019

Viewing posts 1–8 of 8

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

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.

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?

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!

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.

Sounds good :)

This archived topic is closed to new replies.