Edit the Height of a Section on Mobile in Squarespace 7.1

What does this code do?

You may run into a situation where you want the height of a section to be medium on desktop but small on mobile. This code snippet will allow you to add or remove padding from a section on mobile.

Code Snippets

Choose the code snippet based on the vertical alignment of the section.

Aligned at the Top

Copy and paste this code into Design > Custom CSS

/* Height of Section on Mobile */
@media screen and (max-width: 640px) {
  #COLLECTIONID #page .page-section:nth-of-type(1) {
    min-height: 50vh;
    .content-wrapper {
      padding-bottom: 10vw;
    }
  }
}

Then edit the padding and min-height of the section.

Aligned in the Middle

Copy and paste this code into Design > Custom CSS

/* Height of Section on Mobile */
@media screen and (max-width: 640px) {
  #COLLECTIONID #page .page-section:nth-of-type(1) {
    min-height: 50vh;
    .content-wrapper {
      padding-top: 5vw;
      padding-bottom: 5vw;
    }
  }
}

Then edit the padding and min-height of the section.

Aligned at the Bottom

Copy and paste this code into Design > Custom CSS

/* Height of Section on Mobile */
@media screen and (max-width: 640px) {
  #COLLECTIONID #page .page-section:nth-of-type(1) {
    min-height: 50vh;
    .content-wrapper {
      padding-top: 5vw;
    }
  }
}

Then edit the padding and min-height of the section.

How To Use It

1. Copy and paste the code as indicated above.

2. To learn how to find a collection id check out our Start Here guide.

3. Edit the padding and min-height of the section.