[Resolved] Disable Featured Image on Mobiles and Tablet

[Hugo]

Hi,

Can you let me know how can I disable the featured image on mobile and tablets? Tried on the customizing, but couldn’t find any option for it.

[Elvin]

Hi,

To clarify: Do you want to remove the featured image on both single post page and blog list page?

Let us know.

A wise man once said:
"Have you cleared your cache?"

[Hugo]

Just on the single post. I want to have the featured image on desktop and blog, but on mobile and tablets I want to disable the featured image on the single blog posts.

[David]

Hi there,

you would require some CSS like this to hide your Header Element on smaller screens:

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

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

[Hugo]

Thank you for your help.

Could you let me know step by step how can I add that code to my WordPress website? Thanks in advance.

[David]

Simplest method:

1. Go to Customizer > Additional CSS
2. Paste the code in there – if theres already code in there just insert a new line at the top and paste it there.
3. Publish changes.

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

[Steve]

Hi, I have a couple of follow up questions about hiding the featured image on mobile.

In the Additional CSS section, there is already code in there. I have not manually added any css, so is this part of my theme, or how I have designed the site? Here is a screenshot.

Also, if I add the css mentioned here to hide the featured image on mobile, do I use the Enter key to insert a new row at the top, before this part /* GeneratePress Site CSS */ .inside-article,?

Thank you

[David]

Hi there,

that CSS would have been imported when you added a Site from the GP Site Library.

Thats correct, you can place the cursor at the start of the very first line ie. /* Gener..... and hit return a couple of times to give you some space to add your new code.

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

[Steve]

Thank you for getting back to me. I don’t know if I did something wrong or what. I added the css to the top of the Additional CSS panel, but I can still see the image on mobile. I also ran a couple of different URLs through Google PageSpeed Insights and I can see the images in the preview pane for mobile off to the right.

Here is the first bit of css after I added it. Any ideas?

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

/* GeneratePress Site CSS */ .inside-article,
.sidebar .widget,
.comments-area {
border: 1px solid rgba(232, 234, 237, 1);
box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}

[Leo]

Any chance you can open a new topic and link us to the page in question?

Thanks 🙂

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

[Steve]

No problem, I just opened a new ticket.

Thank you!

[Leo]

Thanks 🙂

I’ll get to it shortly.

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

[Hugo]

Hey guys, Sorry to re-open this topic but I was trying to disable the featured image for all blog posts only on mobile and the code from previous messages doesn’t work here.

What should I do? I want the featured image on the desktop but not on mobile (trying to speed up my website).

[David]

Hi there,

the above is for a site using a Header Element, to remove the featured image from the page – try this:

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

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

[Hugo]

Thank you David. It worked Perfectly.

[Author]

Posts