Archived topic
Thumbnail Css Class
9 replies · Started by Sami on January 18, 2019
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.
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.
Sure, I added the URL :)
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%;
}
}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?
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
That's exactly what I was looking for but where do I find the Advanced Settings?
Select the Block - in the Settings SideBar > Block Tab > Advanced
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!
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.
