Why Won't My Hyperlinks Work on Mobile with Link Mapping on Google?

<html>
<head>
<title>
Beard Filler
</title>
</head>
<body>
<map name="Linkmap"
<area shape="rect" coords="121,1077,479,1177" href="https://bestbeardstuff.com/collections/frontpage/products/beard-hair-filler-black"/>
<area shape="rect" coords="106,1595,248,1635" href="https://bestbeardstuff.com/collections/frontpage/products/copy-of-beard-hair-filler-brown" />
<area shape="rect" coords="354,1595,496,1635" href="https://bestbeardstuff.com/collections/frontpage/products/beard-hair-filler-grey"/>
<img src="https://d3k81ch9hvuctc.cloudfront.net/company/SLiQf7/images/d6b73265-a78e-4248-9490-b91998b52051.jpeg" usemap="#Linkmap"/>
</body>
</html

ABOVE IS THE BASIC CODE I USE.

THEN INSERT

( FOR MOBILE)

@media only screen and (max-width: 600px)

Also I just learned how to Code. But I guess this would be helpful for other learning how to code. Would really appreciate the help.

Page 1 / 1

@JorgeV

Just wanted to jump in and ask for some clarifications here: are the hyperlinks not working only when you place them into mobile view? Would you have any screenshots to share of both your desktop view and your mobile view so that we can compare and help investigate?

Specifically, I think what’s happening here is that you’re utilizing coordinates in the same fashion for both desktop and mobile, though if you use the same coordinates for both, the mobile view will change based on whatever the dimensions of the screen are.

Since it can be difficult to map the image with the link in mobile, I’d perhaps recommend using an image and a tag around it, because every browser would interpret that the same and it wont run into issues with mobile devices or changing screen sizes. Another alternative is to use Javascript to find and calculate the coordinates for you on a per screen basis, which might be more effort. If you do want to go for responsive image maps, you’ll need a javascript solution and use jquery. The links below might be a good start to explore if that’s how you’d want to approach it.
https://stackoverflow.com/questions/7844399/responsive-image-map
https://github.com/stowball/jQuery-rwdImageMaps

Hope this is helpful!
-Cass.

<html>
<head>
<title></title>
<style>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1" name="viewport"/>
body {
margin:0 auto;
padding: 0 auto;
}
.center {
display: block: 0;
margin-left: auto;
margin-right: auto;
width:50%;
}
table {
border-spacing: auto;
}
td { padding: auto;
}
img { border: auto;
}
@media screen and (max-width:600px) {
}
@media screen and (max-width: 400px) {
}
</style>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
</head>
<body>
<a href="https://auto.4media.marketing/">
<map name="mapLink">
<area coords="183,1305,618,1404" href="https://auto.4media.marketing/" shape="rect"/>
<area coords="183,6899,618,6998" href="https://auto.4media.marketing/" shape="rect"/>
<area coords="468,7254,720,7290" href="mailto:matt@4media.marketing" shape="rect"/>
<area coords="180,7254,396,7290" href="tel:3233123411" shape="rect"/>
<img href:="https://auto.4media.marketing/" src="https://d3k81ch9hvuctc.cloudfront.net/company/WAagZr/images/91c0b492-4383-48db-b4ac-47672c10f605.jpeg" usemap="#mapLink"/>
</map>
</a>
</body>
</html>

I know now that its because the Gmail (predeccesor) doesnt use map source or map linking causing my buttons to not work. Instead I have made divs and tables to insert each PNG separately and to Anchor them with href=. It was a coding error on my end due to lack of coding knowledge and understanding

Reply

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials

Scanning file for viruses.

This file cannot be downloaded