I’ve recently been working on a new portfolio site for myself using a Webflow template that I bought.
I’ve been using CMS pages for each of my case studies. These CMS pages are each composed of a long Rich Text Block that is styled via classes from a separate static page, and that’s been working out very well for me.
I’ve embedded a Figma prototype link into the Rich Text field via the “Embed” feature in the rich text element within the CMS:
It works to embed and the Figma prototype shows up on my published site, however - it’s not centered:
With that being said, my question is: Is there a way to center this embedded, third-party iFrame within the Rich Text Block so that it’s centered on the screen, rather than left-aligned?
Additionally, is it possible to add top and bottom margin spacing to an element like this?
Here is the iFrame code:
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2F5nH7fuXVIWBfxNpHfly6eS%2FTest-Results-Design-Challenge%3Fnode-id%3D356%253A636%26viewport%3D285%252C202%252C0.31873252987861633%26scaling%3Dscale-down&chrome=DOCUMENTATION" allowfullscreen></iframe>
Thanks for your help in advance!
PS - Let me know if I uploaded the wrong Read-Only link, or if it doesn’t work for some reason.