Thread Starter
Sharon
(@prettybiddy)
Hi again – I see that this piece of code in Make is resizing my popup Google Map lightbox to 643.4px by 304.4px (I specified 550px x 550px in the plugin): How do I stop Make from resizing my popup… ?
<div style=”display: block; visibility: visible; top: 761px; left: 580px; position: absolute; width: 304.4px; height: 643.4px;” tabindex=”-1″ role=”dialog” class=”gmw-light” id=”colorbox”><div style=”height: 643.4px; width: 304.4px;” id=”cboxWrapper”><div><div style=”float: left;” id=”cboxTopLeft”></div><div style=”float: left; width: 304px;” id=”cboxTopCenter”></div><div style=”float: left;” id=”cboxTopRight”></div></div><div style=”clear: left;”><div style=”float: left; height: 611px;” id=”cboxMiddleLeft”></div><div style=”float: left; width: 304px; height: 611px;” id=”cboxContent”><div style=”width: 300.4px; overflow: auto; height: 607.4px;” id=”cboxLoadedContent”><div class=”gmw-map”><iframe src=”//maps.google.com/maps?hl=en&ie=utf8&output=embed&iwloc=addr&iwd=1&mrt=loc&t=m&q=122+South+Hancock+Street%2C+Rockingham%2C+NC&z=7″ height=”415px” width=”550px”></iframe></div></div><div style=”float: left; display: block;” id=”cboxTitle”></div><div style=”float: left; display: none;” id=”cboxCurrent”></div><button style=”display: none;” id=”cboxPrevious” type=”button”></button><button style=”display: none;” id=”cboxNext” type=”button”></button><button style=”display: none;” id=”cboxSlideshow”></button><div style=”float: left; display: none;” id=”cboxLoadingOverlay”></div><div style=”float: left; display: none;” id=”cboxLoadingGraphic”></div></div><div style=”float: left; height: 611px;” id=”cboxMiddleRight”></div></div><div style=”clear: left;”><div style=”float: left;” id=”cboxBottomLeft”></div><div style=”float: left; width: 304px;” id=”cboxBottomCenter”></div><div style=”float: left;” id=”cboxBottomRight”></div></div></div><div style=”position: absolute; width: 9999px; visibility: hidden; max-width: none; display: none;”></div></div>
Hi Sharon!
I suspect this is caused by the following CSS in the Make stylesheet:
iframe[src*="google.com/maps"] {
width: 100%;
height: 300px;
}
@media screen and (min-width: 800px) {
iframe[src*="google.com/maps"] {
height: 600px;
}
}
These rules are intended to make embedded maps responsive for different screen sizes, but clearly there are some unintended consequences. We are looking into a different approach for this, but in the mean time, you can try prefixing each rule selector with “.entry-content” to ensure it doesn’t affect the popup,
.entry-content iframe[src*="google.com/maps"]
or you could try removing those rules from the stylesheet altogether.
Thread Starter
Sharon
(@prettybiddy)
Hi Corey – thanks so much! I saved off style.css and then removed the 2 rules and now the map pops up the right size! I need it to pop up at least 500 x 500 or the “Directions” option isn’t shown on the map which is what I needed. Thanks again!
