CSS element not responsive

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

1. You can add width="100%" in your iframe:

OR

2. 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