CSS: Responsive google maps on mobile devices - html

Question

I have a google maps Section on my website for my contact page. In my browser the css for the map is
<div class="googlemap" style="margin-left: 50px; margin-right: 50px;">
<iframe style="border: 0;" src="map" width="50%" height="600" allowfullscreen="allowfullscreen">
</iframe>
</div>
In a smarthphone view i get the half map and aligned in left as shown below.
Google maps on mobile
I want to apply CSS that makes my map responsive on mobile.
I try something like the following but it doesnt work
#media screen and (max-width: 600px) {
.googlemap{
//these are the ideal margins for my mobile view
margin-left: 10px;
margin-right: -350px;
}
How to set this properly working?

Answer 1

Note two things that you must account for in restyling your map component:
Inline Styles
Iframe Attributes
The only way to override inline-styles from a stylesheet is to use the important! keyword. Read up on specificity to understand what is going on and some ways to overcome it: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
You may also have to use the important! keyword to override the iframe width and height attributes.
I don't know what your expected final design should be, but you could do something like the following:
* {
box-sizing: border-box;
}
#media screen and (max-width: 600px) {
.googlemap {
margin: 10px !important;
}
.googlemap > iframe {
width: 100% !important;
height: auto !important;
min-height: calc(100vh - 20px);
}
}
<div class="googlemap" style="margin-left: 50px; margin-right: 50px;">
<iframe style="border: 0;background: gray;" src="map" width="50%" height="600" allowfullscreen="allowfullscreen"></iframe>
</div>