Home Page on mobile view - Trader Theme

Solved

Home Page on mobile view - Trader Theme

aslanov91uk
Tourist
6 0 1

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.

 

WhatsApp Image 2025-01-13 at 04.16.32_aabe09c4.jpgWhatsApp Image 2025-01-13 at 04.16.32_d0b88e7b.jpgWhatsApp Image 2025-01-13 at 04.16.32_d1855389.jpg

 

Accepted Solution (1)
theycallmemakka
Shopify Partner
1789 435 462

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

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 6 (6)

Kyle_liu
Shopify Partner
409 52 73

Hi @aslanov91uk 

 

Please share your store url

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me Email Me Buy Me A Coffee
aslanov91uk
Tourist
6 0 1

Hi, 

The link is - https://www.pestfreehome.uk/ 
Thank you.

theycallmemakka
Shopify Partner
1789 435 462

Hi @aslanov91uk 

 

Please provide link to your store. I will review the site and provide a solution accordingly.

 

Thank you

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

aslanov91uk
Tourist
6 0 1

Hi, 

The link is - https://www.pestfreehome.uk/ 
Thank you.

theycallmemakka
Shopify Partner
1789 435 462

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

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

aslanov91uk
Tourist
6 0 1

Makka, 

You are a LEGEND! 
Much love to you and have a great day. 
I will save your email.