Jump to content

Custom Iframe to work with mobile and desktop CSS

Recommended Posts

Site URL: https://www.viptransferts.com/booking

Site URL: https://www.viptransferts.com/booking

Hi,

I'm very new to coding so please keep that in mind. 🙂
I created an Iframe for my booking manager and it works fine on mobile and desktop in terms of the scaling except for one thing.

To make a comfortable viewing experience on my mobile version I had to add padding in my css code.
But now on my desktop version the bottom of the frame is way too low. And vice versa when I try to make it look nore natural on desktop it scrunches up my mobile version to a point that it isn't usable.

I appreciate any help you can give me.

Thank you for your time.

My css code

.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 180%;
}

.resp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;

}

my Html code
 

<div class="resp-container"; style="overflow: hidden; margin-top: -500px; margin-left: 0; left: 0px;">
    <iframe class="resp-iframe" src="https://order.yourdriverapp.com/en/62f4bbbc936362372d91a8e7" gesture="media" scrolling="yes" height="1000" width="600" frameBorder="0"  allow="encrypted-media" allowfullscreen></iframe>
</div>


What it looks like on desktop

image_2022-08-15_152350291.png

Link to comment
  • Replies 2
  • Views 690
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.