Hi,
I’m having an issue with this particular category page on my site: https://eatsabroad.com/europe/ireland/dublin/
It’s supposed to show the category name (Dublin) at the top, as well as a few sentences of text. However, the embedded Google Map is completely covering all of this text. Previously it was appearing correctly on my laptop, but not on my smartphone. I just updated my Newspaper theme to the latest version, and now it’s appearing incorrectly on both (not sure if that’s the cause or just a weird coincidence).
I had added some custom CSS to make the embedded Google Map responsive on the mobile version. That seems to be working fine (it now fits within the screen, whereas before it didn’t entirely fit), but I’m not sure why it’s covering all of the text that precedes it. Any feedback would be appreciated.
Thanks!
Hi,
The map is not displaying at the moment on the website, at least for me it does not
– http://prntscr.com/hbp0ic
However the map iframe seems to cover the category description and other elements. It could be made to display properly in terms of positioning, like this
– http://prntscr.com/hbp28a
Enter this code in Theme panel->Custom CSS and check if it fixes the positioning
.category .google-maps iframe {
position: relative;
}
Thanks
Thank you! Changing the position to relative worked and now the headline and text are showing.
How could I make the embedded map larger? This is what I have right now in my style sheet:
<style>
.google-maps {
overflow:hidden;
padding-bottom:75%;
position:relative;
height:0;
}
.google-maps iframe {
position:relative;
height:480px;
width:1068px;
}
</style>
Thank you!
Hello,
You can add an !important tag after the height atribute but please note it will also have to be adjusted for responsiveness. Use the theme advanced css to change the width and height for smaller screen devices.
Thanks.
