Hide a Section on Mobile Only Squarespace [EASY CSS GUIDE]
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 👇
Want a framework for designing the perfect homepage?
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;
}
}
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.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
