Google Maps iframe responsive issue
<p>I've tried to make the google iframe map responsive, but when viewed on mobile, the map remains the same size instead of resizing. I've tried replacing the code multiple times (based on answers found here), but have not found the solution to my problem. Would appreciate if someone could point out my mistake.</p>

<pre><code>/* Google Map */
.google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</code></pre>

<p>HTML </p>

<pre><code>&lt;div class="col-lg-6 col-md-6 col-sm-12" class="google-maps"&gt;
  &lt;iframe src="https://www.google.com/maps/d/embed?mid=1vQ8RDv0RplunNZfvdhgPTtCSjGA" width="600" height="450" frameborder="0" style="border:0"&gt;&lt;/iframe&gt;
</code></pre>