Archived topic
Buttons Don't Link To Page On Mobile or Tablet
10 replies · Started by Mary Pearson on January 11, 2019
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.
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. ;-)
