[Resolved] Blog Layout and Mobile Padding Issue

[John]

Hey everyone,

I have a mobile layout issue. If you go to https://kelleyranaudo.com/blog/ then resize the browser or view it with an iPhone you will find that the left side of the page has padding. How to I remove that padding? Below are my settings.

Go to customize -> layout -> blog then scroll down to columns. I have the following options enabled.

– Display posts in columns checked
– Columns set to 2
– Make first post featured checked

Lastly, if change the Columns set to 1 then the padding issue goes away.

Thanks,
John

[Tom]

Hey John,

In your Autoptimize settings, can you check this option within the CSS section?: Also aggregate inline CSS?

[John]

Tom,

The option ‘Also aggregate inline CSS?’ is already checked.

[Tom]

That’s strange, all of your inline CSS is still in the source. Any other caching/minifying going on?

For now, you can do this:

@media (max-width: 767px) {
    .generate-columns-container > .generate-columns {
        padding-left: 0;
    }
}

[John]

Tom,

I looked into this some more and when I unchecked the ‘CSS Options’ in the Autoptimize CSS Options section it resolved my issue and I no longer have the display issue.

Thank you for your help!
John

[Tom]

No problem! 🙂

[Author]

Posts