Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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!
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:
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:
@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.
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
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!
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!
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;
}
}
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025