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.
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.
Thank you!
