Hey!
I have added a quick links section to my test theme, I have moved it to the very top of the page to make it easier to find here: https://1rsmalu4yk79cwwx-22594233.shopifypreview.com
On desktop, the horizontal scroll works, for some reason on mobile devices, you can’t scroll across horizontally to see the other quick links when
What have I done wrong?
If you load a small screen on a desktop, it works, it doesn’t work on the actual phone when you swipe and use gestures with your touchscreen though so you will need to test it on mobile to see the issue.
I’m Richard Nguyen - CRO Expert at PageFly - Free Landing Page Builder.
Maybe some theme css overflow has changed the behavior of the quick links you can try to add this code to your theme css file
@media only screen and (max-width: 767px){
.off-canvas--viewport {
overflow-x: scroll important;
overflow-y: hidden !important;
}
}
Hope this can help you solve the issue
Best regards,
Richard
Litos
October 26, 2022, 5:08am
3
Hi @George_Greenhil ,
Go to Assets > theme–critical.css and paste this at the bottom of the file:
@media only screen and (max-width: 767px) {
.quick-links {
width: 100% !important;
display: flex !important;
flex-wrap: nowrap !important;
scroll-snap-type: x mandatory !important;
scroll-behavior: smooth !important;
scroll-padding-left: 1rem !important;
-webkit-overflow-scrolling: touch !important;
overflow-x: auto !important;
scrollbar-color: #f1f1f1 #ddd !important;
scrollbar-width: thin !important;
}
}
Hope it helps!
Hey @Litos & @PageFly-Richard ,
Thanks so much for getting back to me.
I have tried both of those solutions but neither fix it fully.
From what I can tell, it almost seems to be a conflict with the quick links.
It’s like on touch devices it cant distinguish if someone trying to click a link or scroll the bar.
If you try to swipe with your finger, you almost have to hold-down in a gap between links then scroll.
I have attached a video of it to this post, any ideas?
Hey @Litos & @PageFly-Richard ,
Any ideas after looking at the attached video of it on my mobile?
Litos
November 1, 2022, 1:39pm
6
Hi @George_Greenhil ,
Sorry for the delay, please send me the preview link, I will check it for you
Hey @Litos
Please see the link requested below for testing on a mobile device.
https://28k1ca5xbr5vng5f-22594233.shopifypreview.com
Litos
November 1, 2022, 2:28pm
8
Hi @George_Greenhil ,
Please go to theme.liquid file and change code here:
Code:
@media only screen and (min-width: 768px) {
.quick-links a:hover {
background-color: #51baf7;
color: #ffffff;
}
}
Hope it helps!
Hey @Litos
that still doesnt seem to fix the scrolling issue on mobile, I have attached a video again on my iPhone.
Sorry @Litos
The video didnt attach, I have reattached it this time.
