Yikes! – Editing data-width embed


I got a problem with embedding posts from Quora, that I’ve been unable to solve for hours.

The embed code has these properties

data-width='560' data-height='260'

No matter what I write (px / % / em / VW) as width and height it doesn’t seem to respond. Changing the width of the embed element doesn’t work either unless you’re okay with cropping the post (which of course isn’t an option).

On desktop they fit okay but they’re not responsive:

So: How do you make embeds like this responsive in Webflow?

Thank you!

Here is my site Read-Only: LINK


You could try setting the data-width to 100% and the data height to 100%. Then adjusting the actual embed block on your Webflow site. Try also having overflow:hidden on the embed block too.

It’s quite difficult to play around with as the code does not display on the read-only link. Let me know if this works!

Thanks for answering. Ah right, here is the embed code:

<span class='quora-content-embed' data-name='What-kind-of-challenges-can-I-take-daily-to-become-a-better-UI-UX-designer-in-100-days/answer/Emil-Villumsen'>Read <a class='quora-content-link' data-width='100%' data-height='100%' href='https://www.quora.com/What-kind-of-challenges-can-I-take-daily-to-become-a-better-UI-UX-designer-in-100-days/answer/Emil-Villumsen' data-type='answer' data-id='155304535' data-key='5dc3023ba9ece34c68b936dbce155788' load-full-answer='False' data-embed='puyzwtq'><a href='https://www.quora.com/Emil-Villumsen'>Emil Villumsen</a>&#039;s <a href='/What-kind-of-challenges-can-I-take-daily-to-become-a-better-UI-UX-designer-in-100-days#ans155304535'>answer</a> to <a href='/What-kind-of-challenges-can-I-take-daily-to-become-a-better-UI-UX-designer-in-100-days' ref='canonical'><span class="rendered_qtext">What kind of challenges can I take daily to become a better UI/UX designer in 100 days?</span></a></a> on <a href='https://www.quora.com'>Quora</a><script type="text/javascript" src="https://www.quora.com/widgets/content"></script></span>

I tried changing data-width and data-height to 500% and block embed to 100%. They are actually responsive then but they create horizontal overflow and crop :confused:

@EmilVillumsen I had a little play around, but it seems that the actual plugin that embeds the posts puts a min-width:500px property on the iFrame that it embeds. I’m not sure there is much you can do about that because it’s a third party widget.

You could try adding an iframe for each post? You can individually style iFrames so that might make it easier?

@JSW Thanks for the effort :+1:

Yeah I feared that they put a min-width. Hmmm perhaps I can set a min-width:250px!important rule or something in custom code. Not sure it’ll overwrite though?

If I use an iFrame it’ll create a horisontal scroll too on mobile though I guess.

It’s weird how such a huge site has embed code that is too wide for mobile and not responsive :thinking:

Embedding sucks! :sleepy: I did think using an !important my work, but the iframe’s class isn’t defined so you cant target it.

Good luck with it! Sorry I was no help!

Hm yeah okay.

I’ll keep trying. Thanks!

1 Like