How to prevent excesive horizontal scrolling

Solved

How to prevent excesive horizontal scrolling

Unknowndev234
Shopify Partner
167 2 6

Hi, I want to prevevnt excesive horizontal scrolling on my collection and product pages. Note this problem only on mobile version. And also my logo is on homepage is perfect but on collection and product or any other page is not aligend as homepage on mobile version. Thanks in advance!
store url: https://store1.ecomsmartify.shop/products/lahu
Password: 4

Accepted Solution (1)

topnewyork
Astronaut
1166 154 197

This is an accepted solution.

Hi @Unknowndev234 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

 

<style>
 @media (max-width: 768px){
.header__heading-logo {
    max-width: 72% !important;
    margin-top: 4px !important;
}
body{
    overflow-x: hidden;
}
}
@media (min-width: 769px) {
 .product-page-container .page-width {
        overflow-x: hidden !important;
    }
}
</style>

 

 If my reply is helpful, kindly click like and mark it as an accepted solution.

Use our Big Bulk Discount app to boost your sales!(https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!
Thanks!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month

View solution in original post

Replies 5 (5)

Dotsquares
Shopify Partner
48 1 3

Hi @Unknowndev234,

 

Please follow these steps to solve this issue:

 

Prevent Excessive Horizontal Scrolling on Mobile:

Horizontal scrolling on mobile devices often results from elements exceeding the viewport width. To resolve this:

  • Add CSS to Hide Overflow:
  • Navigate to your Shopify admin panel.
  • Go to Online Store > Themes.
  • Click on Actions next to your current theme and select Edit code.
  • In the Assets folder, locate and open your CSS file (commonly named base.css or theme.css).

Scroll to the bottom of the file and add the following code:

html, body {
overflow-x: hidden;
}

Save the changes.

 

To Align the Logo Consistently on Mobile:

If your logo appears correctly on the homepage but is misaligned on other pages in the mobile view, you can adjust its alignment using CSS:

  • Add CSS for Logo Alignment:
  • In the same Edit code section, open the CSS file (base.css or theme.css) located in the Assets folder.
  • Add the following code at the end of the file:
@media only screen and (max-width: 767px) {
.header__heading {
padding-left: 4.4rem; /* Adjust this value as needed */
}
}

 

Save the changes.

 

This media query targets devices with a screen width of 767px or less (common for mobile devices) and adds left padding to the header, helping to align the logo consistently across all pages.

 

Hope it helps. Let me know if you need more help.

 

Regards,

Dotsquares Ltd


Problem Solved? ✔ Accept and Like solution to help future merchants.


Shopify Partner Directory | Trustpilot | Portfolio
Unknowndev234
Shopify Partner
167 2 6

Thankyou soo much for providing me the solution. But the logo problem is not fixed. on homepage logo is perfect. but when I move to the other pages. my logo is move bit to the right side. I want to fix that. I want logo on other page aligning like as homepage. Thanks

topnewyork
Astronaut
1166 154 197

This is an accepted solution.

Hi @Unknowndev234 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

 

<style>
 @media (max-width: 768px){
.header__heading-logo {
    max-width: 72% !important;
    margin-top: 4px !important;
}
body{
    overflow-x: hidden;
}
}
@media (min-width: 769px) {
 .product-page-container .page-width {
        overflow-x: hidden !important;
    }
}
</style>

 

 If my reply is helpful, kindly click like and mark it as an accepted solution.

Use our Big Bulk Discount app to boost your sales!(https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!
Thanks!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month
Unknowndev234
Shopify Partner
167 2 6

Thankyou soo much for providing me the solution. But the logo problem is not fixed. on homepage logo is perfect. but when I move to the other pages. my logo is move bit to the right side. I want to fix that. I want logo on other page aligning like as homepage. Thanks!

topnewyork
Astronaut
1166 154 197

replace the code "@media (max-width: 768px){ .header__heading-logo { max-width: 72% !important; margin-top: 4px !important; }" . And add this code 

 

@media (max-width: 768px){
.header__heading-logo-wrapper {
    width: 75% !important;
    margin-top: 3px !important;
}
}

 

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month