- This topic has 17 replies, 6 voices, and was last updated 1 year, 10 months ago by David.
-
AuthorPosts
-
January 4, 2021 at 2:00 am #1604535Hugo
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.
January 4, 2021 at 2:36 am #1604579ElvinStaffCustomer SupportHi,
To clarify: Do you want to remove the featured image on both single post page and blog list page?
Let us know.
January 4, 2021 at 2:39 am #1604584HugoJust 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.
January 4, 2021 at 3:23 am #1604637DavidStaffCustomer SupportHi there,
you would require some CSS like this to hide your Header Element on smaller screens:
@media(max-width: 1024px) { .page-hero { display: none; } }
January 4, 2021 at 7:04 am #1605076HugoThank 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.
January 4, 2021 at 7:11 am #1605085DavidStaffCustomer SupportSimplest 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.January 25, 2021 at 5:48 am #1632618SteveHi, 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
January 25, 2021 at 6:18 am #1632654DavidStaffCustomer SupportHi 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.January 25, 2021 at 2:15 pm #1633334SteveThank 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);
}January 25, 2021 at 5:51 pm #1633476LeoStaffCustomer SupportAny chance you can open a new topic and link us to the page in question?
Thanks ๐
January 25, 2021 at 6:13 pm #1633501SteveNo problem, I just opened a new ticket.
Thank you!
January 25, 2021 at 6:15 pm #1633503LeoStaffCustomer SupportThanks ๐
I’ll get to it shortly.
May 21, 2021 at 2:55 am #1792312HugoHey 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).
May 21, 2021 at 4:56 am #1792440DavidStaffCustomer SupportHi 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; } }
May 21, 2021 at 5:10 am #1792454HugoThank you David. It worked Perfectly.
-
AuthorPosts
- You must be logged in to reply to this topic.