Prevent iframe Vertical Scroll On Mobile

Question

I added an iframe to a WordPress page template. The iframe has a style of min-height: 475px. I would add the iframe code, but it is proprietary to the company I work for. The iframe looks great on desktop (100% page width, height looks great. But I have a vertical scroll issue on mobile.

When viewing the page on mobile the iframe section scrolls vertically. No scroll bar, just vertical scrolling. I want the iframe to fit the page perfectly on the mobile view so the iframe section does not scroll up or down.

I have tried adding/adjusting styles to the iframe such as: max-height:100%, min-height: 663px, etc...

So far no luck. When I increase the min-height the desktop view has more white space between the iframe div and the div below it, not good.

Any suggestion on how to remove iframe vertical scrolling on the mobile view?

Does this answer your question? [Full-screen iframe with a height of 100%](https://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-height-of-100) — Austen Holland, Apr 06 '20 at 19:51
Please add more information like screenshots and your codes. both HTML and CSS. I leave a downvote, but after your edition definitely I remove the downvote. — AmerllicA, Apr 06 '20 at 20:14

score 0 · Answer 1 · answered Apr 07 '20 at 22:04

0

Media queries solved this issue. Setting a height: ___px for each max-width: ___px.

answered Apr 07 '20 at 22:04

Webman

51
1
8

Prevent iframe Vertical Scroll On Mobile

1 Answers1