-1

I've done it like this, the code is below, I copied the same iFrame many times with different aspect ratios, which show or hide in particular sizes. Is there any better/shorter way to do this?

<div class="container map d-none d-xl-block"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="1100" height="600" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy"></iframe></div>
<div class="container map d-none d-lg-block d-xl-none"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="900" height="600" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy"></iframe></div>
<div class="container map d-none d-md-block d-lg-none"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="700" height="400" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy"></iframe></div>
<div class="container map d-none d-sm-block d-md-none"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="530" height="400" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy"></iframe></div>
<div class="container map d-xs-block d-sm-none"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="300" height="300" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy"></iframe></div>

2 Answers 2

2

If you carefully see that there iswidth="1100" in your iframe. Just replace it withwidth="100%"

0
0

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
<div class="container map d-none d-xl-block">


<iframe class="responsive-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="1100" height="600" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy">
</iframe>

</div>

And now the Iframe is responsive

1
  • Thanks, worked perfect. But I also added some height to ".map" and made "position: relative;" in ".responsive-iframe" May 17, 2021 at 13:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.