Sometimes when designing a Squarespace website, we want things to look different on the desktop and mobile versions.

Not everything that works well on desktop will look as good on mobile. This is how you hide a section on just the mobile version of your Squarespace website.

Watch the video

Check out the YouTube video below 👇

Head to website > pages > website tools > custom css and firstly add the following media query to your custom CSS box:

@media screen and (max-width: 640px)

This tells Squarespace that you’re targeting all screen sizes smaller than 640px, e.g. mobile devices.

Next, using the Squarespace ID finder copy and past the ID for the section you want to hide.

Add the following code:

display:none;

If you want to hide more sections, just add their ID to the list.

An example of how this would look is:

@media screen and (max-width: 640px) {

SECTION-ID-HERE {

display:none;

}

}

📩 Join the inner circle to get exclusive code updates

Hit save and you’ll have hidden the section on mobile only. Don’t forget to go into the mobile version of your website and remove any gaps white space that the hidden section has left behind.

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

Want more?