Dear Simion,
Is there a way to hide the 1st image in a post on the mobile version?
I have this page: https://www.coupdepoker.com/poker-en-ligne/test-winamax-poker/
I chose Post template style 12 (so, no featured image) and set at the beginning of the post a small image. But, when you look at the mobile version of the same page, you’ll see the image twice (the featured image + my 1st image). Is there a way to hide on mobiles my 1st image?
And tablets will use template style 12 right? So no problem?
Thanks for your help
Hi,
While on desktop you can select that post template and not show the featured image, on mobile there is a single post template which does show the featured image. I could give you a code to remove the content image and only show the featured image on mobile
– https://www.screencast.com/t/6l25M7q7WU
That should work, make some tests with it
.td-post-content .td-post-featured-image + p > img {
display: none;
}
It will remove the first image after the featured image for all posts that have one. The code can be entered in Theme panel->Mobile theme->Custom CSS section.
Thanks
Thanks Simion, sounds perfect. But is there a way to customize this code so it works for one category only?
It would be, for example this code will apply only for posts in the “Poker en ligne” category
– https://www.screencast.com/t/tCLB4pGz9R
.category-poker-en-ligne .td-post-content .td-post-featured-image + p > img {
display: none;
}
Works perfectly 🙂 Thanks Simion!
Hi,
I have a little problem with this code now since I’m using Gutenberg and shortcodes.
So my first block is a “shortcode block” with a shortcode creating 2 columns. In the left one I have my picture (that I want to hide on mobiles) and the text in the right one.
The look and feel is way better than before.
But now my 1st picture is showing on mobiles…
Can you kindly help?
Hi,
Please tell me which image you want to hide on mobile ( provide a screenshot ).
Thank you.
Hi Calin,
That’s the first image on this page: https://www.coupdepoker.com/poker-en-ligne/test-winamax-poker/
The 1st image on this page (W logo) is actually the same image than the featured one, so on mobile you see it twice, that’s why it’s a problem.
Can you kindly help?
Hi,
Please replace the above code with this one
.category-poker-en-ligne .td-post-content .su-row:nth-child(2) amp-img {
display: none;
}
The code above is not longer working because there was some changes in theme files.
Thank you for your understanding!
It works 🙂
Thanks Calin!
