I can't fix my horizontal scroll on mobile and the header also looks misaligned.

Hi Everyone,

Could anyone please help me understand what I may have done incorrectly? The mobile version seems to offer horizontal scrolling plus the header looks misaligned once the user scrolls horizontally as shown in the images below.

Is there a workaround anyone knows?

Thanks so much.

@OKBOX Can you please send me store url?

Sorry, forgot to add that.

https://www.onekindbox.com.au

@OKBOX Go to assets/style.css and paste below css at bottom of file.

.index
{
display: block !important;
}

hi @OKBOX

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for your store.

Regard your concern about the horizontal scroll and header off align
Please help me to follow the steps below and add some code to your theme file:

Step1: Online store > Themes > Edit code > Search : .css

Step2: Select, that should be theme.css or style.css or base.css

And paste this code here to the very end of the file

.index{
display: block !important;
}

Hope this helps.

Best regards,

PageFly

Hi @DelightCart and @PageFly-Victor . Thank you for your help and suggestion. I added it to the styles.css but it wasn’t solving the issue.

I started testing by eliminating blocks and I found out that the issue lies with a ‘divider’ and not just the divider but when the divider animation is set to ‘slide in right’. If I change the animation to ‘zoom in’ the issue is resolved.

Please see the images below for reference. Image 1 is when I tested it after applying your code suggestions. Image 2 is when the divider animation is set to ‘slide in right’. The last is when it’s set to ‘zoom in’.

1 Like

@OKBOX

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

Hi KetanKumar,

As mentioned in my earlier post, I managed to work around the issue by
changing the animation setting of the divider to ‘zoom in’ instead of
‘slide in right’. This seems to have fixed it which is why you can’t see
the issue when you’re checking for it.

There’s a bug with with divider animation that needs fixing but for the
moment I’m not too fussed about which divider animation I’m using.

Thanks for checking it out.

1 Like

@OKBOX

thanks for more details

if possible to share video how can i check this so i will guide you

KetanKumar,

The issue is fixed because I changed the divider animation that was
initiating horizontal scroll on mobile.

Cheers