[CSS] iframe does not displayed correctly on Iphone Devices

I have an iframe setup which is not displaying on iphone devices.

  • Nithin
    • Support Wizard

    Hi Jeffrey Euen-Gow,

    Hope you are doing good today. :slight_smile:

    Since the section is using iframe what we could control via CSS is limited. Could you please remove this CSS:

    .resp-container {
        position: relative;
        padding-top: 56.25%;
        width: 100%;
        height: 3000px;
    }

    And replace the above CSS with the following one, and see how it behaves?

    .resp-container {
    	position: relative;
    	padding-top: 56.25%;
    	width: 100%;
    	padding-bottom: 92%;
    	overflow-y: hidden !important;
    }
    
    @media screen and (max-width: 480px) {
    	.resp-container {
    
    	position: relative;
    	padding-top: 50%;
    	width: 100%;
    	height: 2850px;
    
    	}
    }

    You can add the CSS via the default WordPress customizer, under Appearance > Customize > Additional CSS.

    I hope this helps. Please do let us know if you need any further assistance. Have a great day ahead. :slight_smile:

    Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.