Iframe Fullwidth?

Hey digitalprint2222,
Thank you for your patience, typically the iframe size is not controlled by it’s content, it is controlled by the lightbox popup that is showing the iframe.
So for example you could try something like this css:

div.mfp-iframe-scaler  {
  height: 150vh !important; 
  width: 100vw !important;
  }
.mfp-iframe-scaler iframe {
    left: -15vw !important; 
    width: 90% !important; 
    height: 90% !important; 
}

please note that the iframe is inside of the mfp-iframe-scaler and typically closing the popup is done by clicking outside of the popup so this is why the css declares the width at 90%, you can try adjusting to suit your needs as this css is a general example.

Best regards,
Mike

Hi,
Thank you for the feedback, sorry my mistake, for your debugger code above please add the custom class color-section-for-iframe then use this css:

#main > .color-section-for-iframe > .container {
	width: 100%;
	max-width: 100%;
	padding: 0;
}

expected results:

Best regards,
Mike

Hi,
From your screenshot it doesn’t look like you have the text element which has the iframe code in a color section as per your original request and debugger code, that is what I created the solution for, did you try it?
The iframe is not contained by it’s own width, it is it’s parent container that you need to target, please try the above solution to examine and understand, I also linked to the working example from the screenshot in the Private Content area above that you could examine.
If you link directly to the page you are working on I could help further.

Best regards,
Mike

Hi,
Thank you for the feedback, in your latest test/screenshot I see that you didn’t add the custom class to the color section so the css solution I posted would work, such as the working example I linked to for the screenshot above.

In order to make the iframe full-width, the parent container needs to be adjusted, so your first option is to place it in a full-width element such as a color section and then set it’s container width to 100% and remove any padding & margin overriding the theme Layout & Dimensions

Please note that this has nothing to do with the width of the iframe, I’m talking about the container inside the color section.
If you are not going to use a full-width element such as a color section, and the iframe is going to be in a code block (preferably), then add this custom class to the code block element code-block-for-iframe and use this css:

.code-block-for-iframe {
	width: 100vw !important; 
        position: relative !important; 
        left: calc(-50vw + 50%) !important;
}

Please see the link to the working example below.

Best regards,
Mike

Hi,
Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike