Why do multicolumn fields display differently on various devices?

HelplessSoul77
Excursionist
21 0 11

@TerenceKEANE or anyone else

 

Here I have a nut to crack. On my PC and on my Galaxy S24 Ultra all multicolumns looks great.
The whole multicolumns are clickable and it takes you to designated page. There is no arrows or link lables visible. As it should be. 

HelplessSoul77_1-1708458574596.png


HOWEVER, when I checked the page on my Tablet (Galaxy Tab A8), my testing phone (Redmi Note 11 Pro 5G) and my wife's Iphone 13, my eyes started to bleed. Multicolumn fields looks like in next image, with a link label and with arrows. Also only the link label is clickable, instead of the whole column field. It goes the same in all multicolumns on the site. 

 

HelplessSoul77_3-1708458680321.png

 

How is this even possible? Like the altered codes don't aply the same for all devices...?? 
Please help. 

 

Replies 2 (2)

TerenceKEANE
Shopify Partner
424 77 71

Hello,
First of all, I'm not a tablet user, but when I looked from the Chrome developer section, the double title and arrow part as shown in the image don't appear below the product. I've also checked it at different resolutions, unfortunately, it seems to work fine. Of course, what you see must be the real issue!

Usually, we write code globally and then finish the job with additional additions for mobile. However, for example, the code can be written specifically for a single device. Also, it's important to remember that when writing code, it's written in a language that browsers understand. For example, if you write a code, sometimes it may not be supported in the relevant browsers. That's why phrases like '-webkit' are added to the beginning of the code. This means that not all browsers support new CSS features at the same time.

Also, sometimes when visiting websites on mobile or tablet, we try to access them with the built-in web browsers. For Samsung, there is Samsung Internet Browser. There can be different browsers on different devices. So before trying this:

1- Make sure you're using the latest version of your browser.
2- Use the latest version of Chrome, Firefox, Opera, Edge and Safari. Try in both normal and incognito windows.
3- After updating the browser, clear and reset the full browsing history. If it still doesn't work, there may be another problem. Places like Samsung Internet Browser may have trouble supporting the latest web standards.

Also, when clicking on the product images on the homepage, it doesn't redirect to the relevant page. It only does so when clicking on the text below. Maybe there's a small issue here too. Try the above and if there's still a problem, let's investigate further!

 

best regards,

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you. --> Our Website
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
HelplessSoul77
Excursionist
21 0 11

Hi. Thank you for the reply. As I'm in such a hurry I changed the code already, removed the part that was making the whole column clickable and hiding the arrows. Instead I'm now using only inserted link as a description, which makes only the text under the image clickable. Unfortunately I don't know how to solve this anyhow else. Visually it's still better than with arrows.