Custom Iframe to work with mobile and desktop CSS

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

It looks fine. Did you solve or still need help?

I solved It thank you
I used minheight in css