Changing layout of CMS-added images from desktop/tablet/mobile?

Design help General
1

Hello all, quick question!
In short, can you style these settings to change from desktop/tablet/mobile ?

image
image1185×592 166 KB

This is inside the CMS, client-side. When it comes to mobile, that right align doesnt look good. I’d like to change it to centered with text above/below instead of wrapping to the left for mobile.

As I cant select these items inside the rich text element inside the designer (when its pulling its data from the CMS) I cannot change how these images align per screen-size.

Thanks!

https://feineweine.webflow.io/blog/fournier-pere-fils-unsere-meinung

2

Hi Jono,

You can target the element tag by it’s class name Webflow gives it when you decide on one of those options.

Image%20001
Image%200011605×225 154 KB

So if you add a custom code with the .w-richtext-align-floatright tag, under a @media query rule - it will change all the images in your rich text format that have the float right property.

3

Thank @avivtech ,
Because the floatright is a part of the class name, it throws me off as a non-dev. Would the correct code look like this?

<style>
@media screen and (max-width: 479px) {
  .w-richtext-align-floatright {
    float: none;
  }
}
</style>

thanks!

1 Like
4

Yeap, seems legit :star_struck:

5

Didnt work unfortunately… but we must be close! If anyone notices something we may have missed, I’ll update the post with the solution for other viewers / google-finders :slight_smile:

6

Give this a shot. Tested in devtools.

<style>
@media screen and (max-width: 479px) {
  .w-richtext figure.w-richtext-align-floatright {
    float: none;
	margin-left:0;
  }
} 
</style>
7

Great !!! thanks @webdev