Streaming live at 10am (PST)

[Blog] How do I make images in a Rich Text Element responsive?

Hey Webflow Community!

I am trying to make the images for the mobile view a bit larger as they are very hard to see at the moment. However, I don’t want images to cover the full width when the blog is read on other devices.

Same goes for video embeds.

How can I achieve that?
Thanks a lot for taking your time.

Best wishes,
Julian


Here is my public share link: Webflow - Julian Being Relationship and Sexual Well-Being Blog For Men
(how to access public share link)

Hey @fredj32

You can put some custom CSS code to do the trick.
I added a media-query to apply the properties only on devices with a viewport under 479 px.
Then i bumped up the max-width of the image and videos inside your rich texts. I also added a minimun height on the videos as they can appear a bit squashed.

You can play with the numbers to suit your taste :smiley:

@media (max-width: 479px) {
    .w-richtext figure {
        max-width: 80%;
    }
    
    .w-richtext figure.w-richtext-figure-type-video, .w-richtext figure[data-rt-type="video"] {
        max-width: 80%;        
        min-height: 7rem;
    }
}

Hope it helps ! Have a nice day

Hey @jptrinh ,

thank you so much! Where do I enter the code? I put it in body and it didn’t seem to work.

Best wishes,
Julian

@fredj32 - Make sure to place CSS inside a style block <style> your css </style>, within an embed.

1 Like

Thank you, Jeff.
To clarify. Should I add an embed on paste the code there like this?

Not quite. Your CSS needs to be in between the two style tags, replacing the text “your css”.

1 Like

got it! Thank you so much! Now it works for the images!

Do you know why the code doesn’t affect the video?

Ow that’s my bad I think
On line 8 (in the screenshot), if you change the property max-width with width you should be ok

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.