Editing Text Size for Mobile

What does this code do?

These code snippets allow you to edit the text size when viewed from a mobile device.

Code Snippets

Copy and paste the media code into Design > Custom CSS

 /* Mobile Only Code */
@media only screen and (max-width:640px) {
  CODE GOES HERE
}

Then add the appropriate code in between the brackets where it says CODE GOES HERE.

/* All Heading 1s */
h1 {
  font-size: 1.2rem;
}

/* All Heading 2s */
h2 {
  font-size: 1.2rem;
}

/* All Heading 3s */
h3 {
  font-size: 1.2rem;
}

/* All Heading 4s */
h4 {
  font-size: 1.2rem;
}

/* All Paragraphs */
p {
  font-size: 1.2rem;
}

/* All Links */
a {
  font-size: 1.2rem;
}


/* Specific Heading 1s */
SELECTOR h1 {
  font-size: 1.2rem;
}

/* Specific Heading 2s */
SELECTOR h2 {
  font-size: 1.2rem;
}

/* Specific Heading 3s */
SELECTOR h3 {
  font-size: 1.2rem;
}

/* Specific Heading 4s */
SELECTOR h4 {
  font-size: 1.2rem;
}

/* Specific Paragraphs */
SELECTOR p {
  font-size: 1.2rem;
}

/* Specific Links */
SELECTOR a {
  font-size: 1.2rem;
}

If the code you chose has the word SELECTOR in it, change the word SELECTOR to one of the selectors below.

Squarespace 7.0

/* One Page */
#COLLECTIONID

/* The Whole Footer */
footer

/* The Top Footer Section */
.Footer-blocks--top

/* The Middle Footer Section */
.Footer-blocks--middle

/* The Bottom Footer Section */
.Footer-blocks--bottom

/* One Section */
#PAGEID

/* One Text Block */
#BLOCKID

Squarespace 7.1

/* One Page */
#COLLECTIONID

/* The Whole Footer */
#footer-sections

/* One Section */
#COLLECTIONID #page .page-section:nth-of-type(1)

/* One Text Block */
#BLOCKID

How To Use It

1. Copy and paste the code as indicated above.

2. If targeting specific text, choose the selector that matches your situation.

3. To learn how to find a collection id, page id, or block id check out our Start Here guide.

4. If targeting one section in Squarespace 7.1, change the 1 to match the section you are trying to change.

5. Change the 1.2 to the size you would like.