Horizonal scrolling on mobile view

Shopify Discussion
1

My website is Knippelgardencentre.com and I am having an issue with getting my mobile view to show my tables on collection pages fully. Please advise on how to fix this.

My desktop view is fine. I just need to get the mobile view to look better.

2

Hi @KNIPPLEGAR

We see quite a few places on your site that are having problems, you can try this way:

  1. Online Store → Themes → Edit code:

view (41).png
view (41).png1802×841 101 KB

  1. Find the styles.css file and add this code at the end of the file:
@media only screen and (max-width: 767px) {
   .btn{
       font-size: 0.6em !important;
   }
   table tr{
       display: flex;
       flex-direction: column;
   }
   table td{
       display: flex;
       gap: 10px;
   }
   table td img {
       float: left !important;
       margin-right: 10px;
   }
}
@media only screen and (max-width: 360px) {
   .btn{
       font-size: 0.5em !important;
   }
}

Your interface will become better:

view (42).png
view (42).png390×868 143 KB

We hope that this can help you.