[Resolved] Padding Category Text on Mobile

[Mark]

On mobile, the text I added to a category page needs some padding. Please see out ‘review’ category page in my example on mobile. Is there a quick fix to this?

[David]

Hi there,

add this CSS to Additional CSS or your child theme style sheet:

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

[Mark]

Worked like a charm! Thanks

[David]

Glad to be of help

[Mark]

Apparently, the mobile logo is now not showing. Is there something else I can do? Thanks

[David]

Looks like you’re using Autoptimize to Lazy load images and its generating a 404 error – in the Autoptimize settings you can exclude images from lazyload by using their filename, try that and see if it resolves the issue.

[Mark]

Unfortunately, that did not resolve the issue.

[David]

Yeah – stil 404’ing – can your try removing the logo and re-uploading a new one, making sure the filename is different

[Mark]

Deleted old and added new with a new name. It doesn’t seem to have helped.

[David]

The image is being served from the shortpixel CDN – is this set-up with Autoptimize ?

[Mark]

I believe so. This is selected: Optimize images on the fly and serve them from Shortpixel’s global CDN.

Please keep in mind, the logo was loading fine before we added the CSS.

[David]

That CSS shouldn’t effect the loading of an image, this is the plugins authors feedback on excluding images from the lazy load:

https://wordpress.org/support/topic/exclude-images-from-lazy-load-2/#post-11640786

There is no class being added to the image – but it says any part of the image url should work

[Mark]

This is what I have in there: authority-favicon-2.jpg

[David]

I am seeing this:

pa-favicon-logo.jpg

The Mobile Header has a separate Logo to the Site Identity

[Mark]

AHHHHH! When did I do that! Thanks so much!

[Author]

Posts