Why is my mobile theme not scrolling correctly?

Store Design
,
1

Hey guys,

I have added a section to my test theme attached below.

On desktop, the horizontal scroll works perfectly, for some reason on mobile devices, you can only scroll if you touch perfectly in the small space between the quick links. If you try to horizontal scoll/swipe right or left with your finger on a link, the page doesn’t scroll.

What have I done wrong?

All images, code and links are below.

https://81x35tdzs8dr98x2-22594233.shopifypreview.com Scroll down a little on the homepage to see the section.

Screenshot 2022-10-07 at 14.52.04.png
Screenshot 2022-10-07 at 14.52.04.png2879×1575 559 KB


      ## Quick Links

  
    [Protein Bars](https://proteinpackage.co.uk/collections/protein-bar) 
    [Protein Powder](https://proteinpackage.co.uk/collections/protein-powder) 
    [Energy Drinks](https://proteinpackage.co.uk/collections/energy-drinks) 
     [Protein Foods](https://proteinpackage.co.uk/collections/protein-foods) 
    [Pre-Workout](https://proteinpackage.co.uk/collections/pre-workout) 
    [Amino Acids](https://proteinpackage.co.uk/collections/amino-acids) 
    [Vegan](https://proteinpackage.co.uk/collections/vegan)
     [Gluten-Free](https://proteinpackage.co.uk/collections/gluten-free)
 [Low Calorie](https://proteinpackage.co.uk/collections/low-calorie) 
  [Clearance](https://proteinpackage.co.uk/collections/clearance) 
    [View All](https://proteinpackage.co.uk/collections/frontpage)
  


.quick-links a {
    font-weight: bold;
    line-height: 28px;
    text-align: center;
    margin: 0px 10px 0px 10px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 16px;
    color: #000000;
    border: 1px solid #51baf7;
    flex: 0 0 auto;
    padding-left: 24px;
    padding-right: 24px;
    text-transform: uppercase;
    }
    
.quick-links {
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    align-items: flex-start;
    -webkit-overflow-scrolling: touch !important;
    }

 .quick-links::-webkit-scrollbar { 
      display: none !important; 
   }
    
.quick-links a:last-child {
    margin-right: 10px;
}

@media only screen and (max-width: 767px) {
.quick-links a:first-child {
    left: 0px !important;
}
}

.quick-links a:first-child {
    margin-left: 48px ;
}

.quick-links a:hover {
background-color: #51baf7;
color: #ffffff;
}

.quick-links-title {
text-align: center;
margin-bottom: 12px;
}

@media only screen and (max-width: 767px) {
.quick-links-title {
margin-bottom: 6px;
}
}
1 Like
2

@George_Greenhil

oh sorry for that issue i have checked its work proper its simple css slider so just work scroll

3

Hey @KetanKumar

Thanks, do you know why on mobile devices, you can only scroll if you touch in the small gap between the quick link buttons?

That’s the issue I have, on desktop it works fine.

Many thanks,

George