mapped graphic OVER a background image?

Hi @mrswwonka

I’m not able to understand the exact issue.

Can you please share some screenshots with highlighting the issue in it. ??

I shared the link so didn’t think a screenshot was needed.

I was able to get the map to show fully, but it goes over to the right side no matter what I do.

Hi @mrswwonka,

Please add below CSS in Appearance > Customize > Additional CSS section:

.page-id-19 .entry-content>:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: none; 
}

And you will be able to see the map in the center of the screen like this: https://prnt.sc/smgya3 ??

It goes to the right now ??

Hi @mrswwonka

I don’t know why that is not working.

Okay, please delete the CSS I have provided before and at that place please paste below CSS:

.page-id-19 .entry-content>:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 1000px;
}

Again I have tested this CSS. You can see here: https://prnt.sc/smp6d1 and it is working fine. ??

Thank you! That worked on the laptop, but now it is no longer viewable on an iphone ??

Its large half a map

I edited the map, which I will have to do at various times, and it went back to the left side.
It’s still not responsive ??

Hi @mrswwonka

Apply this:

.page-id-19 .entry-content>:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 1000px;
    margin-left: 350px;
}

That worked on the laptop, but now it is no longer viewable on an iPhone.

How was the map look on the mobile devices before applying CSS?

Can you please share the screenshot? So that I will try to fix it accordingly.

The above only put it too far to the right again.
Using that code, on the phone it doesn’t show the map at all since its too far right.

I’m attaching a pic of the iphone version prior to changing the code.

Its randomly going back and forth when I edit the map itself on the map’s website.
They have instructions for responsive but can’t get that set correctly either… I’ve been waiting to hear back from them, but of course I run into these issues during a holiday weekend lol

I don’t know how to get the screenshot to you

• This reply was modified 4 years, 6 months ago by mrswwonka.

Hi @mrswwonka

Take a screenshot in your phone, then upload it here: https://prnt.sc

Once you uploaded the screenshot, a link will be generated there, just copy that link and send it to me.

https://prnt.sc/snleto

The CSS that I have provided is working very fine at my side.

See here: https://prnt.sc/snv8vg, You can see after applying that CSS the map is appearing in the middle of the page.

But I can see it is still not responsive.

They have instructions for responsive but can’t get that set correctly either.

Can you please share those instructions?

Here is the copy and paste from the map page FAQ…

Q: I need to deploy my clickable map on a responsive website, but the map does not fit automatically. Any solutions/workaround for this?

A: Perform the following steps to your premium map instance:

1.Replace map.php with map_responsive.php within the IFRAME’s src tag.
2.In the clickable map editor, set the dimensions of the map to default 960*720
3.Remove the height and width attribute of the IFRAME element and add a style attribute with these CSS settings height:100%;width:100%
4.Make sure that the parent container is big and flexible enough to have the map appear in a normal good looking way, i.e. too small height will make the map shrink vertically, while too small width will do the same horizontally.

And here is my screen shot …

https://prnt.sc/so5lla

Hi @mrswwonka

You have this IFRAME src tag:

<iframe src="https://makeaclickablemap.com/map.php?0926555afb88b77f48a0f61898e9edc43214231a" frameborder="0" title="Create a clickable map with Makeaclickablemap" scrolling="no" height="720" width="960"></iframe>

Make it like this:

<iframe src="https://makeaclickablemap.com/map_responsive.php?0926555afb88b77f48a0f61898e9edc43214231a" frameborder="0" title="Create a clickable map with Makeaclickablemap" scrolling="no" height="720" width="960"></iframe>

Please replace map.php to map_responsive.php.