Featured images not visible in mobile version

Hi Kasia,

Dyad should display featured images across smaller screens by default.

I saw that you have a featured image set for one of your posts – Ofterta – and I was able to see it when visiting that page on my Nexus 6.

If you’re not able to see the featured image on that post on your mobile, please let me know what device you’re viewing the site on and the browser. If possible, a screenshot of what you’re seeing would be helpful too.

Hello Siobhan,

Featured image is set for all my sites apart from ‘Realizacje’ – no image assigned here, but in the mobile version only for the main site the future image is visible.

My mobile device is Samsung galaxy x5 (Android), and Opera on my laptop.

Below there are printscreens for mobile version (taken from personalization option in my wodrpress panel showing how the site looks on different devices, so these are not taken from my mobile directly) – the first one is for the main site, and the second one presents how the rest looks like

https://www.easypaste.org/file/F5KOxtd1/main.site.jpg?lang=pl
https://www.easypaste.org/file/grWbC4uo/Oferta.jpg?lang=pl

I really like the theme and I do not want to change it but I am sad that people viewing by site via mobile cannot see the images.

I would really appriciate any kind of help

Thank you in advance

Kasia

Thank you so much for taking the time to take screenshots and give details of your device, Kasia!

I wasn’t able to replicate the issue originally as my mobile phone is wider in width than yours. I was able to see the problem when testing on a smaller device and found that the following CSS is causing the issue:

@media only screen and (min-width: 50px) {
    .is-singular .entry-media-thumb {
        background-image: none !important;
        display: none;
    }
}

A slightly different version of the above CSS appears in the theme’s original style.css file:

@media only screen and (min-width: 961px) {
	.is-singular .entry-media-thumb {
		background-image: none !important; /* !important to override inline styles - don't load image unless needed */
		display: none;
	}
}

Did you edit the theme’s style.css file directly? If so, please undo the changes you made to make sure your featured image appears on smaller devices.

As an extra note: Please do not edit your theme’s files directly. Any changes you make there will be lost when it comes time to update.

Instead, to add custom CSS: Firstly set up a child theme or activate a custom CSS plugin. If you have Jetpack installed then you can activate its custom CSS module.

If you let me know what you were trying to achieve with the original edit to the theme’s style.css file, I’ll see if I can help you with some custom CSS.

Thanks!

Siobhan,

Thank You, Thank You!
It is amazing, it works now! The only thing I changed is (min-width: 50px) to (min-width: 961px)

Indeeed, I changed the original CSS as I am a self-lerner and I tried some changes to achieve some effects…

Now, it works!

I am so happy! ?? Thank You one again!

Kasia, from Poland

You’re most welcome, @kasiaszulc! I’m glad I was able to help. ??

Remember to make CSS changes via a child theme or custom CSS plugin, as I recommended above, in the future so that you’re able to quickly pinpoint and test for issues like this.

We’re right here if extra questions come up!