- This topic has 10 replies, 2 voices, and was last updated 5 years, 3 months ago by
.
-
Posts
-
On my website at https://pwgoaltending.ca/ I have a section with Camps and Clinics. Inside each section I have images with two image links in each.
The first image link is to enlarge the size of the image.
The second image link is a button to Register. That button should go to https://pwgoaltending.ca/the-app/All works fine on desktop.
On tablet and mobile, the first image link works in each case, but the second (button) link doesn’t work.
Do I need some special CSS to make them work?
Thank you.
Customer Support
Hi there,
i am not 100% sure but i believe the issue is to do with the image map rescaling out of proportion on the smaller devices. Maybe this article will help:
https://researchasahobby.com/responsive-image-clickable-areas-free/
Thank you David. Makes sense. I will assume you are right and close the ticket. Will investigate the article and see what to do about it.
Much appreciated!
Thanks Mary, i am not 100% sure its been a while since i used image maps. let us know how you get on.
I started reading and it looks really interesting but on second thought I am thinking that the writing is too small anyway on mobile and I may just make different images completely. Not sure. Just another idea.
Thanks for your help David. It is very much appreciated.
I would agree that mobile needs some larger buttons 🙂
If you want to use different images for mobile, you can use the responsive classes:https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes
Personally i would look at a Row / Column layout so the components are editable and responsive.
Excellent idea. Thank you. I’ll have to figure it out. 😉
Maybe something similar to the 3 column sections you have further up the page 🙂
I’m working on it and it’s coming together. Thank you again.
Awesome. have a good day
Having a great day thank you! You too. 😉
- You must be logged in to reply to this topic.