My website looks good on desktop but is too wide on Mobile

My website: https://thrustinteractive.squarespace.com

This sire looks good and has the appropriate white space on the sides of content on desktop, however when I look at the site in a mobile view elements are bunched together and the spacer blocks are lost.

I am using the Brine template, is there any way to add code or have the spacer blocks that keep my site clean show up on mobile. It is keeping my website from being responsive and looking as good on mobile as it does on desktop.

Thank you for your help!

@Shaunakg Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
html {
       overflow-x: hidden;
   }
   main {
       padding-left: 10px;
       padding-right: 10px;
   }
}

I really appreciate this! However this also resizes the display on web. I am looking for something that keeps my site on desktop the way it is, but gives displays the spacer blocks, or allows me to increase side padding on mobile only.

Would you know code for this?

Hi, Shaunakg

Ive visited your website and looks like the problem still persists.

Try this

html,body{
    overflow-x: hidden;
}

Ive found it from other forum, and it worked well for my website. 

Let me know if it does the same to you too.

On 12/27/2020 at 1:52 PM, Akhmad said:

Hi, Shaunakg

Ive visited your website and looks like the problem still persists.

Try this

html,body{
    overflow-x: hidden;
}

Ive found it from other forum, and it worked well for my website. 

Let me know if it does the same to you too.

 

I had the same issue on my site, I tried this and it worked perfectly. 

Thanks so much Akhmad!