Our site is become completely broken on the mobile view, how can i fix it?

[Marton01]

Dear shopify community!

I ecountered a problem what makes our site completely broken on the mobile view.

I attached a screenshot to make the issue easier to understand:

Additionally i can send a screen recording of the issue.

When you scroll to right on mobile, you will see a big empty space,

and when you zoom in, or zoom out in mobile, you will see that shopify inbox chatbox is slided to the bottom right corner, and a buy button hovering in the mid right named “Vásárlás”

This issue is new, and its serious because our store is live with a loyal customer base, and our valentines day campaign is in the corner.

I cant continue my work, and i cant make sales that way.

May you have any advice that how this issue can be solved?

Also, i not know how to code, also i have no budget to pay for developers.

I used a visual builder called Ecomposer to build my site, after i contacted them, they told me that the problem is comes from shopify, not from the app.

I contacted shopify support, but they are still working on to solve this issue,

what is still blocking us from making sales.

Thank you for any kind of help or advices in advance!

biscottiz.hu

[TheUntechnickle]

Hello @Marton01 !

Thank you for reaching out. I understand how frustrating this must be, especially with your Valentine’s Day campaign approaching and a loyal customer base to serve.

Based on the screenshot and description you’ve provided, here are some potential causes and solutions to explore:

1. Mobile Viewport Issues

• The empty space on the right and chatbox positioning suggest there might be an element extending beyond the viewport width
• This commonly happens when elements have fixed widths or aren’t properly constrained with responsive design principles

2. Shopify Chat Widget Conflict

• The shifted chat widget indicates a possible z-index or positioning conflict
• This could be interfering with your “Vásárlás” (Buy) button placement

3. Possible Solutions to Try:

• Check if any containers or images have widths exceeding 100vw (viewport width)
• Review any custom CSS that might affect mobile layouts
• Inspect elements with position:fixed or position:absolute that could be causing overflow

We’d be happy to take a closer look and help resolve this! Could you please DM us your collaborator access code? Our team can then:

• Thoroughly inspect the mobile layout
• Identify the specific elements causing the overflow
• Provide targeted fixes without disrupting your store’s functionality

Don’t worry - we understand you’re not familiar with coding, and we’re here to help get your store back to optimal performance, especially with the important Valentine’s Day season ahead.

Just send us that collaborator access code, and we’ll work on getting this fixed for you as quickly as possible!

Looking forward to hearing from you,
Shubham | hello@untechnickle.com

[TheUntechnickle]

Hey @Marton01 ,

I’ve figured out a quick fix, for now. Please follow the steps below:

Just copy and paste the below text in the grey square at the bottom of your theme’s base.css file:

@media (max-width: 768px) {
    .ecom-4p416gxkdcs {
        display: none !important;
    }
}

Steps to Add:

1. Go to Online Store > Themes in your Shopify Admin.
2. Click Actions > Edit Code next to your active theme.
3. Open the base.css file in the Assets folder.
4. Scroll to the bottom and paste the above code.
5. Click Save and preview your store.

This should work! Later if you want us to look in detail, we’d love to do it for free.

Thanks,
Shubham | Untechnickle

[Laza_Binaery]

Hi @Marton01

The issue seems to be “Vásárlás” button and its custom CSS.

.ecom-core.ecom-4p416gxkdcs {
    padding-bottom: 0 !important;
    position: relative;
    right: -612px;
    top: -71px;
}

You can try to add mobile specific style for that like:

@media screen and (max-width: 1024px) {
    .ecom-core.ecom-4p416gxkdcs {
        padding-bottom: 0!important;
        position: relative;
        right: 0;
        top: 0px
    }
}

[Marton01]

Dear Untechnickle!

Thank you so much for your help!

You solved this issue quite quickly, while it was a challenging issue for shopify customer support, they called the issue “unusual”.

Also the customer support of my visual builder app told me that they are unable to do anything about this.

The issue is fixed as you see:

That means that i able to continue my work and i able to make sales.

You saved the day, thank you again so much.

biscottiz.hu

[Marton01]

Dear Laza!

Thank you for your reply! The issue is fixed for now.

I not know how to code, but its seems that your solution could work just as well.

Thank you and best wishes to you.

[TheUntechnickle]

Always here for you, Marton!

Feel free to DM or reach out anytime if you have any questions, we’d be thrilled to step in and save the day again!

Cheers!
Shubham | Untechnickle