Why is my mobile homepage not resizing properly?

Store Design
1

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:

194541376_491291735436437_6061166226347470087_n.jpg
194541376_491291735436437_6061166226347470087_n.jpg540×960 52.3 KB

195462539_538858923798253_763597252576292499_n.jpg
195462539_538858923798253_763597252576292499_n.jpg540×960 26.2 KB

2

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

3

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

4

Hello SimonBarbis!

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

You can reach us via email

Thanks

Solution1

5

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.

6

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?