Shopify themes, liquid, logos, and UX
Hi All,
I have problem with my home page which drives me nuts!
I spend the last 2 days actively trying to find the solutions on these forums but sadly none of them works.
Please note Desktop version is spot on - it's the mobile version that's doing this.
So when I open my homepage and do not scroll it - it's fine ( perfectly aligned )
When I start scrolling it, then it allows me to go left and right and the whole website design feels like some kind of joystick! It also leaves a small gap on the right making the whole design including menu go left.
I don't know what I am doing wrong! I did changed the code a few times to make some small additions, but nothing that serious that it could affect this.
Here is some photos.
1. How the website should be alligned.
2. When it leaves that gap.
3. And the horizontal navigation bar that it shows ( which shouldn't even be there )
All I want is to fix the website so it can only be moved down ( not on sides )
and perhaps that it automatically adjust to your screen without any extra situations like this one.
Thank you all, happy to provide as much information as possible.
Solved! Go to the solution
This is an accepted solution.
Hi @aslanov91uk,
I have written custom CSS for this solution. Please follow below steps and let me know your feedback.
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>
<style>
@media screen and (max-width: 768px) {
.banner .banner__content {
right: 0px!important;!;
max-width: 100vw!important;
overflow-x: hidden!important;
}
}
</style>
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka
Hi @aslanov91uk
Please share your store url
Hi @aslanov91uk
Please provide link to your store. I will review the site and provide a solution accordingly.
Thank you
This is an accepted solution.
Hi @aslanov91uk,
I have written custom CSS for this solution. Please follow below steps and let me know your feedback.
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>
<style>
@media screen and (max-width: 768px) {
.banner .banner__content {
right: 0px!important;!;
max-width: 100vw!important;
overflow-x: hidden!important;
}
}
</style>
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka
Makka,
You are a LEGEND!
Much love to you and have a great day.
I will save your email.
Learn what's possible with customizing Shopify Checkout beyond what's available out of...
By Shopify Feb 19, 20252m 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, 2025