Archived topic

Hide Featured Image on Mobiles and Tablet

3 replies · Started by Steve on January 25, 2021

Viewing posts 1–4 of 4

January 25, 2021 at 6:13 pm #1633499

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:

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!

January 25, 2021 at 7:21 pm #1633545

Hi there,

Try this CSS instead:

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

January 25, 2021 at 8:51 pm #1633611

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

January 26, 2021 at 10:43 am #1634634

No problem :)

This archived topic is closed to new replies.