[Resolved] Hide Featured Image on Mobiles and Tablet

[Steve]

Hi,

I am trying to improve my mobile metrics on Google PageSpeed Insight, by hiding the featured images on mobile. I added the following css, here:

Customize> Additional CSS

@media(max-width: 1024px) {
.page-hero {
display: none;
}
}

but it doesn’t seem to be working.

As one example, this post is still showing the featured image on mobile:

https://paddleabout.com/what-are-strainers-on-a-river/

I added the css above this line

/* GeneratePress Site CSS */

so it looks like this:

@media(max-width: 1024px) {
.page-hero {
display: none;
}
}

/* GeneratePress Site CSS */ .inside-article,
.sidebar .widget,
.comments-area {

Let me know if you have any further questions for me.

Thanks!

[Leo]

Hi there,

Try this CSS instead:

@media (max-width: 768px) {
    .single .featured-image {
        display: none;
    }
}

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

[Steve]

That worked for hiding the featured images on mobile, thank you!

[Leo]

No problem 🙂

[Author]

Posts