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

Solved

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

jrios111
Visitor
2 0 2

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

Accepted Solution (1)

Not applicable

This is an accepted solution.

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;
  }
}

 

View solution in original post

Replies 3 (3)

Hardik29418
Shopify Partner
2913 419 1081

Please place this code at the end of theme.scss

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

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

Not applicable

This is an accepted solution.

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;
  }
}

 

jrios111
Visitor
2 0 2

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