Hi,
When placing images in rich text, say I have the image 50% width and floating right on desktop, when I go to say, ipad portrait and change that to full width 100%, it alters the sizing on desktop too.
How do I specify explicit sizes and positioning for images in rich text across different device resolutions?
Here is my public share link: LINK
(how to access public share link)
I assume you’re specifying the image placement and dimensions using the popup up bubble with icons within the RT.
Unfortunately, this bubble must be considered as Settings. Like the settings in the settings tab. So it’s not CSS per se, it’s settings, hence not being responsive. Change it for a breakpoint and it’ll affect all of them.
However you can style the <figure> element and it will be responsive.
Select your image in the rt and go to navigator tab to go up in hierarchy to select the figure element. then click on the class field, select Style all Figure elements, then limit to the class of the rt just under.
Now fond a way to style the figure as you want, for desktop, devices.
If you have trouble to do that, comeback with your sharing link so I can try too.
1 - On your site’s dashboard click the Share icon:
http://vincent.polenordstudio.fr/snap/nqmwm.jpg
2 - Generate or Copy the link:
http://vincent.polenordstudio.fr/snap/gpto0.jpg
3 - Then edit your post here and paste it inside.
Hi Vincent,
When I select the figure class and then ‘when nested inside of’ it still won’t let me change any of the styling for it, it just says:
“Editing ID and Visibility settings is disabled for Rich Text children. You can select the parent Rich Text node to edit these settings.”
All I want to do is have the image at 50% on desktop and ipad portrait and then 100% on smaller devices. Am I missing something so simple here?
Hi! Please, do you mid sharing your site’s read-only link?
1 - On your site’s dashboard click the Share icon:
http://vincent.polenordstudio.fr/snap/nqmwm.jpg
2 - Generate or Copy the link:
http://vincent.polenordstudio.fr/snap/gpto0.jpg
3 - Then edit your post here and paste it inside.
Vincent, try this…
If you go to the page ‘Hotel Boship’ you will see in the food and service section a picture of champagne that is currently set at 50%. How would I get that image to display differently (say 100%) across smaller device resolutions?
% doesn’t work it must be preempted by webflow. Fixed values worked though
http://vincent.polenordstudio.fr/snap/dvx4z.mp4
wv units worked too!
Brilliant, thanks Vincent!!
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.