Issue
So in my code, other elements of the container are being responsive and working exactly the way I want them to when the device is shrunk, but the maps
element is not being responsive properly. Now the maps
element is getting too shrunk and not the same amount as the other elements. Stuck on this for the last 3 days. Any ways to get it to work properly?
My html file:
<div class="section">
<div class="container">
<div class="row justify-content-between">
<div>
<iframe src="{{ object.location }}"
class="col-lg-12" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</div>
Solution
- You can add
width="100%"
in your iframe:
OR
- I made an example here if you like it then use it:
.map-container { position: relative; overflow: hidden; width: 100%; padding-top: 75%; /* Adjust this value as needed to maintain the aspect ratio */ } .map-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
<div class="section"> <div class="container"> <div class="row justify-content-between"> <div> <div class="map-container"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d235013.74843228213!2d72.414930809941!3d23.020474099659204!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x395e848aba5bd449%3A0x4fcedd11614f6516!2sAhmedabad%2C%20Gujarat!5e0!3m2!1sen!2sin!4v1703309487976!5m2!1sen!2sin" class="col-lg-12 img-fluid" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div> </div> </div> </div> </div>
Answered By - Mahesh Prajapati
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.