I created a page using a free-form template and activated the mobile version. The links work fine on the desktop version of the page but when the mobile version is displayed, the text shows but they aren't hyperlinks. The page is ProSites for reference. I built them using the rich text component. The coding is:
<p style="text-align: center;"><span style="color: #000000;"><a href="https://go.prosites.com/Test-Your-Marketing-Knowledge-2w.html" target="_self" style="text-decoration: none; color: #000000;">FourSquare </a></span></p>
Any ideas what is going on and how to fix it?
It's not that the links don't work. It's that you're putting a transparent DIV right on top of them, so that receives the clicks.
You want to add this CSS for your case:
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (max-device-height: 480px) {
#mktColumns.mktoMobileKiller {
display: none !important;
}
}