Iframe breaking checkbox content

I have the following code which is using jQuery UI dialog and my iframe content is breaking the formatting of the checkbox depending on the size of the browser window. I also want it to be mobile-friendly. I believe this is just above the iframe. Should I put the iframe in a separate div, also I am wondering if I should put all checkboxes also in a separate divs?

Here is the JSFiddle:

Here is the screenshot with disturbed checkbox content:

It isn’t really clear why you’re putting the iframe on the same line as the text. Just move it to a new line to stop it sitting beside text.

To make the iframe responsive, check this out: https://www.sitepoint.com/css-aspect-ratio/#makingayoutubevideoresponsivewithaspectratio

Iframes are inline elements (thats why its called an InlineFrame). Set it to display block if you don’t want it on the same line as any other inline content.

1 Like

Here is a way to create a modal dialog box with no need for any <div> elements, no need for the padding hack, no need for media queries and much simpler than using jQuery.

2 Likes

Thank you!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.