Layout 4 Columns as 2 Columns on Mobile

Site URL: https://www.gavindesantis.com/videonew

Hello,

I am trying to prevent the mobile layout from showing all 4 of my columns as 1 column with a bunch of rows. I have researched this on google and the Squarespace forums but I cannot find an exact solution for my website. I have played with margins, padding, and width percentages though I cannot get everything to align or resize properly.

This is the new page I'm working on where I have the issue for mobile.

https://www.gavindesantis.com/videonew

The code I'm working with, which was a header injection is below.

<style>
@media only screen and (max-width: 767px) {
.content-wrapper { 
   width: calc(100%/3) !important;
  }
}
</style>

Thank you very much.

1 hour ago, gavindesantis said:

Site URL: https://www.gavindesantis.com/videonew

Hello,

I am trying to prevent the mobile layout from showing all 4 of my columns as 1 column with a bunch of rows. I have researched this on google and the Squarespace forums but I cannot find an exact solution for my website. I have played with margins, padding, and width percentages though I cannot get everything to align or resize properly.

This is the new page I'm working on where I have the issue for mobile.

https://www.gavindesantis.com/videonew

The code I'm working with, which was a header injection is below.

<style>
@media only screen and (max-width: 767px) {
.content-wrapper { 
   width: calc(100%/3) !important;
  }
}
</style>

Thank you very much.

You should remove the code and replace with this, it make sure the column on mobile keep 1/3 of width

Add the snippet below to Design-Custom CSS
 

@media only screen and (max-width: 767px) {
        section[data-section-id="5ff523221e9d50058e860c7c"] .row .sqs-col-4 {
          width: 33.33% !important;
          float: left !important;
        }
        section[data-section-id="5ff6b26590f0197fa6727ede"] .row .sqs-col-4 {
          width: 33.33% !important;
          float: left !important;
        }
}

10 hours ago, bangank36 said:

You should remove the code and replace with this, it make sure the column on mobile keep 1/3 of width

Add the snippet below to Design-Custom CSS
 

@media only screen and (max-width: 767px) {
        section[data-section-id="5ff523221e9d50058e860c7c"] .row .sqs-col-4 {
          width: 33.33% !important;
          float: left !important;
        }
        section[data-section-id="5ff6b26590f0197fa6727ede"] .row .sqs-col-4 {
          width: 33.33% !important;
          float: left !important;
        }
}

Thank you so much. I wish Squarespace made this easier.

@gavindesantis I think the layout on tablet is not good. Do you want to adjust something?

and video page

and you haven't change SEO Title, so browser tab name still shows "Contact 1"

https://www.gavindesantis.com/contact

and huge white space (tablet)