[Resolved] Disable Featured Image on Mobiles and Tablet

Home Forums Support [Resolved] Disable Featured Image on Mobiles and Tablet

Home Forums Support Disable Featured Image on Mobiles and Tablet

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1604535
    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.

    #1604579
    Elvin
    Staff
    Customer Support

    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?"

    #1604584
    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.

    #1604637
    David
    Staff
    Customer Support

    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;
        }
    }
    #1605076
    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.

    #1605085
    David
    Staff
    Customer Support

    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.

    #1632618
    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.

    GP css

    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

    #1632654
    David
    Staff
    Customer Support

    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.

    #1633334
    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);
    }

    #1633476
    Leo
    Staff
    Customer Support

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

    Thanks ๐Ÿ™‚

    #1633501
    Steve

    No problem, I just opened a new ticket.

    Thank you!

    #1633503
    Leo
    Staff
    Customer Support

    Thanks ๐Ÿ™‚

    I’ll get to it shortly.

    #1792312
    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).

    #1792440
    David
    Staff
    Customer Support

    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;
        }
    }
    #1792454
    Hugo

    Thank you David. It worked Perfectly.

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.