Link Blocks not working ONLY on Tablet Portrait!?

Hi there All, :grin:

I am currently building an e-commerce website and have came across this really bizzare issue!!

I have a collection list with items inside of it and then link blocks inside each product image to link through to the relevant product page however the links work on desktop, mobile landscape, mobile portrait and tablet landscape but do not work on tablet portrait!? :face_with_raised_eyebrow:

I have no idea how this can even be possible to be honest, I have also tested across a range of different tablets using BrowserStack’s live servers but having no luck whatsoever!

Anybody’s help with this issue would be such a big help, the website is nearly finished and ready to go live now and I really don’t want to let my client down!

Thank you in advance for any help you may be able to give on this!!

Here is my site Read-Only: :grinning:

(https://preview.webflow.com/preview/pawaspeedsports?utm_medium=preview_link&utm_source=designer&utm_content=pawaspeedsports&preview=24810b818f8ffa8d9b873c95dbde3aa9&pageId=5fbc3a4bb4493c554bdb12c2&mode=preview)

@vincent @PixelGeek @thewonglv @JanneWassberg

  1. Your link block element has no dimensions. It has 100% w and h but its parent has only a vague min-height defined. So in certain cases, the link block must be shrinking to a 0px width something.

  2. you’re using background-images for your product images: don’t do this, for 2 reasons. First, a bg image isn’t an image, it’s a decoration. Your image has no existence in the HTML, only in the CSS. So it doesn’t have a alt description. It’s and accessibility and semantical situation to avoid. Secondly, a bg image don’t have any incidence on the dimension of its container, hence the issues you’re facing with a not dimensionned link block.

DO:

  1. Ditch the image as a bg, remove it, and never use bg-image for images when they are important, when they are a part of your content.
  2. put an image inside of the link block, and link it to your CMS image.
  3. if needed, give proper dimensions to your collection item element.

Hi @vincent,

God, it sucks to be a beginner! Seems so obvious now you point it out!

I have followed the steps you said and it has in fact now starting working, hooray!

Thanks so much for your help, it’s massively appreciated!!

I’ll definitely be mindful of not using background images where possible in the future as well.

Have a nice day and thanks again! :grin:

Haha, don’t wory at all. You’ll get there in no time. HTML/CSS isn’t as vast as you suppose, and Webflow is a great tool to learn the concepts of the web. So learn one thing at a time and you’ll be fluent soon.

@vincent

Yeah, I’m sure I’ll get there sooner or later! Trying to simultaneously learn Webflow, HTML, CSS & JS isn’t the easiest thing I’ve ever done but I’m getting there slowly but surely and can’t wait till it all starts becoming second nature!

Thanks again for your help, have a good day! :grin:

1 Like