How to Swap Elements on Mobile View in Squarespace

CSS

May 16

Want to add an image to the right of text on desktop, but have it appear first on mobile displays?

Update: Since the launch of Squarespace Fluid Engine, if you are using Squarespace 7.1 you can now edit mobile display positioning independently! Learn more here.

If you are on Squarespace 7.0, keep reading…

When I design websites, on desktop displays I often like to have a section with text on the left and an image on the right, but on mobile I like the image to display first. Here’s an example (check it out on your computer and phone) and the Custom CSS you need to do this on your own Squarespace website.

Here’s an example of a Squarespace layout with text and button on the left, image on the right on the desktop. You would expect on mobile to see the text, then button, then image. However, I’ve added code to swap the two columns so that on mobile, the IMAGE appears above the text and button. Check it out on your mobile device or keep scrolling for the code. ↓ (And I’ve added a little Cat ipsum as filler text here for fun.)

Dolor sit amet, curl up and sleep on the freshly laundered towels for jump off balcony, onto stranger's head destroy couch missing until dinner time. Meow meow you are my owner so here is a dead bird. Snuggles up to shoulders or knees and purrs you to sleep see brother cat receive pets, attack out of jealousy gnaw the corn cob ask to go outside and ask to come inside and ask to go outside and ask to come inside for roll over and sun my belly. Catch eat throw up catch eat throw up bad birds relentlessly pursues moth yet be superior. Hunt by meowing loudly at 5am next to human slave food dispenser always ensure to lay down in such a manner that tail can lightly brush human's nose. I bet my nine lives on you-oooo-ooo-hooo scratch the box. Time to go zooooom stare at the wall, play with food and get confused by dust. Plan steps for world domination. Fight own tail chew the plant for slap kitten brother with paw so attack feet meow loudly just to annoy owners crash against wall but walk away like nothing happened.

You can add buttons too

Custom CSS to reorder columns in Squarespace mobile view

The expected behavior in Squarespace is for the text and button to appear above the image on mobile, but I often want the image to appear first. You can achieve this by targeting the section with a bit of Custom CSS:

/* reverse columns on mobile */
section[data-section-id="60a16878e93ae07ca7fb6a6c"]
{
@media screen and (max-width: 767px)
{ .sqs-row
{ display: flex !important; flex-direction: column-reverse !important; }
}
}

Now when you view this page on a mobile device, you’ll see the image appears before the “Here’s an example” text. We are taking advantage of using the CSS flexbox property and reversing the display of the columns on smaller screen sizes. This only affects areas with multiple columns, so on this particular post the text areas before and after the two-column section display as usual.

Important note: You’ll want to replace the section ID with your own and you can also adjust the max-width so the column swap happens on wider or narrower screens.

If you’re using Squarespace 7.1 your section ID will look like the one above. If you are using Squarespace 7.0 and targeting one section of an index page, you can use that section’s URL slug like: #intro-home before the first curly bracket like this:

/* reverse columns on mobile */
#intro-home
{
@media screen and (max-width: 767px)
{ .sqs-row
{ display: flex !important; flex-direction: column-reverse !important; }
}
}