I am trying to make it so that participants in my survey can open a modal that displays another web page in an iframe. The problem is on mobile it does not display properly. I have also tried using the `<embed>` and `<object>` tags, and those display the page correctly, but they don't allow scrolling even with "-webkit-overflow-scrolling: touch;" Here is the code I have. I am not very familiar with coding. I simply found this and have tried to modify it for my purposes. <style type="text/css">body {font-family: Arial, Helvetica, sans-serif;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 100; /* Sit on top */ padding-top: 0px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: hidden; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 0px; border: 0px solid #888; width: 100%; height: 100%; overflow: scroll; /* Enable scroll if needed */ -webkit-overflow-scrolling: touch; max-height: none; } /* The Close Button */ .close { color: #ffffff; background-color: rgb(255,0,0); position: absolute; padding-left: 8px; padding-right: 8px; right: 0px; font-size: 36px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } </style> <h5>Please use this button to open and read a story. Click the red X in the top right corner when you are finished to continue.</h5> <button id="myBtn">Open</button> <div class="modal" id="myModal"> <div class="modal-content"><span class="close">×</span><iframe height="100%" src="https://www.washingtonpost.com/sf/brand-connect/bayer/growing-food-for-a-growing-planet/" width="100%"></iframe></div> </div>