Jump to content

How to make Miro (embedded iframe) appear full page width?

Recommended Posts

Site URL: https://www.laforesta.co/traces-from-the-trails

Hi CSS experts:)

I am trying to set the width of my iframe to go the whole page length, but it seems to be only going so far left and right.

My embed code is <iframe width="1000" height="600"  style="max-width:100%" src="https://miro.com/app/live-embed/o9J_lHgdmb0=/?moveToViewport=269838,-79193,270959,182766&embedAutoplay=true" frameBorder="0" scrolling="no" allowFullScreen></iframe>

Looking through some advice on this forum, I ended up inserting this code into Design > CSS:

div#block-yui_3_17_2_1_1630068565273_6716 .sqs-block-content {
    display: flex;
    justify-content: center;
  padding-left: 0;
    padding-right: 0;
     width: 100% !important;

It does a good job of centering the iframe, but I still can't have it full page width...

Does anyone have any ideas?

Thanks in advance!


Screenshot 2021-08-27 at 15.46.02.png

Link to comment

I think that your embed is probably not the issue. The CSS looks OK, although you probably don't need it, you can just put the width in the iframe code as "100%". I think you just need to edit the content width of your section in the squarespace editor and change it to Large rather than Medium. 

you may need the css for the padding as I think the embed will put in a padding of 17px by default, but that is consistent with other blocks, so try editing the content width first. 

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

Hey @Enea, it's not a specific feature, where you have the embed code, change the 1000 to 100%

<iframe width="1000" height="600"  style="max-width:100%"

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized TrainerSquarespace Expert, and Circle Member and I've been helping my clients as well as those here in the forum and in various Squarespace groups with custom coding and support for Squarespace websites. I would love to help you in any way I can.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials | Buy Me a Coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.