Jump to content

How to Remove Side-by-Side customization on Mobile

Recommended Posts

  • Replies 1
  • Views 241
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

I solved it and sharing the code here in case it helps anyone else.

 

Here is the code to reverse the side-by-side on mobile:

/* CSS FOR TABLET AND MOBILE */
@mobile:          ~"only screen and (max-width: 767px)";

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/

/* ABOUT US PAGE - split section */
 [data-section-id="6220100d0da5aa3524190bd5"] {
  .section-background {
    width: 100% !important;
    margin-left: 0%;
  }
  .content-wrapper {
    width: 45% !important;
  }
    display:block;
    .section-background, content-wrapper {
      position:relative;
    }
    .section-background {
      height: 300px;
    }
  }
  #block-yui_3_17_2_1_1646520366742_4113 {
    margin-left: -100% !important;
  }
/*Section 2*/
[data-section-id="621fed6367fab200e77fa077"] {
  .section-background {
    width: 100% !important;
    margin-left: 0% !important;
  }
  .content-wrapper {
    width: 45% !important;
  }
    display:block;
    .section-background, content-wrapper {
      position:relative;
    }
    .section-background {
      height: 300px;
    }
  }
#block-yui_3_17_2_1_1646259535604_3825 {
    margin-right: -100% !important;
  }

/* Insert Code for Mobile Above This Line */
}

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.