Mobile Category Padding

Hi there,

That CSS should be really close.

Try this:

@media (max-width: 768px) {
    .archive .page-header {
        padding-left: 30px;
    }
}

That didn't work either. I have it on there now.

I'm not seeing the CSS being added.

Can you clear and disable your caching plugin first?

Done

Does the CSS work if you put it to the top of the Additional CSS field?

I just put it update and it doesn't appear to be working.

Meant to say up top.

Maybe something is stripping all of your media query CSS. This is the result when I added using the browser inspector:
https://www.screencast.com/t/8KkGiTh37q

I'm still seeing WP Rocket activated in the source.

Can you make sure it's actually disabled?

My bad, it wasn't disabled. Autoptimize was. They both are now.

There we go. It was being overwritten by this CSS you've also added:

.separate-containers .page-header {
    background: transparent;
    padding: 20px 0;
}

So let's make it more specific like this:

@media (max-width: 768px) {
    body.separate-containers.archive .page-header {
        padding-left: 30px;
    }
}

Just to be clear, remove the top one and replace with bottom one?

Nope you can keep the top one.

And just add the second one to replace the original code I've provided here:
https://generatepress.com/forums/topic/mobile-category-padding/#post-1467516

Did it and looks great. Thanks!

One more question while I have you, please. On mobile-only, is there a way to make my added media images in the body of posts stretch the container? I create all of my post images and they will eventually be the same size. Please see the example post on mobile below and you'll see how the non-features image just misses the left-hand side. Thanks

Any chance you can open a new topic?

We will get to it :)