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.
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;
}
}
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 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.