Mobile Category Padding

[Mark]

Hello, I’m trying to add some padding to category pages on mobile. I saw this on another topic and it didn’t work…

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

[Leo]

Hi there,

That CSS should be really close.

Try this:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

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

[Leo]

I’m not seeing the CSS being added.

Can you clear and disable your caching plugin first?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

Done

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

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

[Mark]

Meant to say up top.

[Leo]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

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

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

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

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

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

[Leo]

Any chance you can open a new topic?

We will get to it 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts