Why is my mobile homepage not resizing properly?

Hello need help from a pro here.

I created my website and the desktop home page is showing just fine but the mobile version seems to be too wide. It is not resizing, you can scroll right on the mobile version, and the header is not showing centered. There is a large white spacing on the right all the way through the length of the page. I have searched and tried solutions on the Shopify community but none of them worked.

Url: https://bluoceans.ca/fr/

Here are screenshots:

Hello SimonBaribs!

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media only screen and(max-width:768px){
.usf-mobile .usf-results.usf-grid {
margin-left: 0px !important;
}
.usf-results .grid-item {
width: 100%!important;
}
}

Hope this helps

Let us know

Thanks

Solution1

Hi @Solutions1 ,

Thank you for your help but the code didn’t work. The page is still too wide as in the previous pictures. Do you know any other way this could be solved?

Thanks for your help,

Simon

Hello SimonBarbis!

Its seems its require custom coding in your theme need to check.

You can reach us via email

Thanks

Solution1

Hello @Solutions1

I’m facing with same issue. I added the code you mentioned but there is no change on my mobile page.
I use DAWN template to create website.

Thank you for your support in advance.

Unlike Simon B. my webpage looked great except my written copy was showing too wide for the page. When I placed in this code, it shrunk everything else and now the copy is perfect but the menu, header, image, etc are all small.

Can you help?