How can I eliminate unexpected horizontal scrolling on my mobile site?

Technical Q&A
1

Hello! I am trying to remove an unexpected horizontal scroll on my store which makes it difficult to use on mobile. I checked through theme settings and did not find any thing mentioning the scroll so im stuck.

My site: elizascorner.com

If you know how to remove the scroll or know how to find out please let me know! Thank you

1 Like
2

Please place this code at the end of theme.scss

@media (max-width: 767px) {
.product-slider-text-wrapper {
    padding: 35px;
}
}
3

Hi @jrios111

https://prnt.sc/128hppj -the horizontal scroll appears because of this section. If you try to hide this section, the scroll will disappear.

As a solution, you can either hide or specify a style to adjust the class .product-slider-text-wrapper. We highlighted the class in red on the screenshot.

To do this, you need to find this class in the style.min.css file. Since this file is minimized, there will be difficulties when editing this file. To find the class, press ctrl+f or cmd+f and enter the class name product-slider-text-wrapper and increase the padding from 30 to 35px.

Should be as below:

@media (max-width: 767px) {
  .product-slider-text-wrapper {
      margin: 0 auto;
      padding: 30px 35px;
  }
}

There is an easier option, without searching for the class. Just paste the code below at the end of the theme.scss file:

@media (max-width: 767px) {
  .product-slider-text-wrapper {
      padding: 30px 35px !important;
  }
}
1 Like
4

Amazing thank you so much! I appreciate the screenshot as well, I’ll keep an eye on things like this for the future!

1 Like