Images in rich-text don‘t span full width

[Zlate (Zlatko Najdenovski)]

---

While the title might seem naively simple, I can‘t figure out if the solution is simple, too.

The images I add in a rich-text don‘t span full-width even though I‘ve set 100% width to both, the image and figure tag, while also selecting the appropriate option for the image within the rich-text as in the screenshot.

When I preview the site in Webflow, the image is full-width, as expected, but in the published site, it‘s not.

What I noticed while inspecting the code is that there is a div wrapper between the image and the figure tag, but in Webflow, there isn’t an option to style that div, and in inspect mode, it‘s set to 940px by some native Webflow styling. Do you think that might be the culprit?

My read-only link →

[ahmed_moeed (Webflow Developer)]

@Zlate , please share the live link, thanks

[Zlate (Zlatko Najdenovski)]

This one?

Tozan

[ahmed_moeed (Webflow Developer)]

yes this link, to see the live website and read only, yes there is difference in image size.

[Zlate (Zlatko Najdenovski)]

I guess this might be caused by some hidden Webflow stylings, or I might‘ve overcomplicated my combo classes. I thought of having a general styling of rich-text elements, and a special one for case studies, and testimonials.

[ahmed_moeed (Webflow Developer)]

Add this in your Page Settings → Inside the <style> tag or in your Site Custom Code (Before ):

.w-richtext figure.w-richtext-align-fullwidth > div {
    display: block;
}

[Zlate (Zlatko Najdenovski)]

@ahmed_moeed

.w-richtext figure.w-richtext-align-fullwidth > div {
    display: block;
}

That actually worked. So it was indeed some Webflow hardcoded value, no? Thanks a lot, Ahmed!

[ahmed_moeed (Webflow Developer)]

@Zlate

Yes, exactly! Webflow adds some default styling under the hood for Rich Text elements, so overriding it like that fixes the issue. Glad it worked — nice catch!

Plz mark this a solutions. Thanks