[Support request] Thumbnail Css Class

[Sami]

On desktop I have the thumbnails (size medium) right aligned which is fine but on mobile it looks really bad because there is only enough place for some broken words. I wanted to fix it with CSS so that it’s aligned center on mobile, but I can’t find a class or id to do that.

[David]

Hi there,

can you share a link to the page where this issue is, you can edit your original topic and use the Site URL field for privacy.

[Sami]

Sure, I added the URL 🙂

[David]

Try this CSS:

@media (max-width: 420px) {
    .wp-block-image .alignright {
        float: none;
        margin-left: 0;
        width: 100%;
    }
    .wp-block-image .alignright img {
        width: 100%;
    }
}

[Sami]

That’s what I’ve tried before, the problem is that it affects not only the medium-thumbnails but also the small-thumbnails which where fine before. I guess it’s not possible to style only the small ones?

[David]

You could give the Image Block a CSS Class in the Advanced Settings. e.g med-thumb then you could target .wp-block-image.med-thumb

[Sami]

That’s exactly what I was looking for but where do I find the Advanced Settings?

[David]

Select the Block – in the Settings SideBar > Block Tab > Advanced

[Sami]

That’s funny, I couldn’t find the advanced field but I saw what you mean on screenshots of other users. So I deactivated all plugins and one (Formidable Forms) was causing it to disappear. Now it’s working perfectly, thanks a lot for the help!

[David]

Might be worth raising that with Formidable Forms as their code shouldn’t be effecting the Editor. Very odd. Glad you found out what was causing it.

[Author]

Posts