google mymaps custom css not working
-
-
- ancle
- Jr. Rocketeer
- Posts: 25
- Thanks: 0
-
Googd evening !
Am trying to add some specific and custom css for a map from google's mymaps to change sizes when displayed on different sizes but the problem is i cant get it to work on the ipad. When the map is resized on my laptop is ok but when viewed on my ipad is overlapping other modules..
<iframe class="map" src=" www.google.com/maps/d/embed?mid=zi2RB_DRc16I.k0-v8WxNcyLI&z=15 " width="250" height="250"></iframe>
I have this code written inside grid-respnsive.css inside /libraries/gantry/css
@media only screen and (min-width: 481px) and (max-width: 767px)
{
.map{width:100px!important;height:200px!important;}
}
@media only screen and (max-width: 959px) and (min-width: 768px)
{
.map{width:200px!important;height:200px!important;}
}
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Iframes are not responsive so they have to be embedded to work. The following links and info should provide a possible solution for you.
CSS solution
http://embedresponsively.com - this online tool creates an embed code with additional markup and inline CSS styles.
http://joomlabe.at/joomla-advice/design/do-the-right-thing-embed-responsively
JS solution
http://npr.github.io/responsiveiframe/
-
Time to create page: 0.051 seconds