How to fix a layout glitch in my online store?

Store Design
, ,
1

Hi, so basically it seems that my store has a glitch in the page layout and I have no idea how to fix it.
The page isn’t fixed so you can scroll out of the border.

I’m adding a video for reference.

Thanks in advance.

2

Hi @iGothica

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

Best regards

Sahil

3

Of course.

url: igothica.com

No pw needed

4

Hi @iGothica I have looked into your site but unable to replicate the issue that your facing, can you please specify how can I replicate the issue.

Best regards

Sahil

5

Simply drag your finger to the left / right. It should point to the problem as you’ll see the red back ground on each side.

6

I have tried it but didn’t found any issue, can you try this is other device and in other browser, did you face the same issue?

I think it is related to browser cache.

Best Regards

Sahil

7

Seems like it’s happening only on safari.

Is it fixable? :folded_hands:t4:

8

Hi @iGothica Yes we can add css that will work for safari browser, but the issue with me is that I am using android and my desktop is using windows so I will be unable to provide you the exact code.

If you need I can provide you the base css that will work for safari, you need to add that in theme.liquid file or base.css file.

Best Regards

Sahil

9

it would be wonderful, thank you very much.

10

Can you send the CSS code, please?

11

Hi @iGothica Please add this code in your theme.css/base.css/style.css file which is available in your theme.

_::-webkit-full-page-media, _:future, :root .safari_only {

  position: fixed;

}

If you are not sure where is your theme.css/base.css/index.css/style.css file please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.css/base.css/index.css/style.css in the code in left hand side which ever is available in your theme.
  6. You can add the above code at the bottom of the file.

Please Note: It is the base code you may need to figure out the exact div or class due to which this error is causing, as I am unable to replicate this issue in my end, so unable to provide you the exact code.

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

12

Great, thanks my friend,