How to show different content on desktop and mobile - Squarespace 7.1

So you want to create different layouts or have different content on desktop and mobile but are unsure how to do it? Well here is some custom code to add this to your website.

The principles behind this are to duplicate a second section that you want for mobile, and then change the styling of the content.

Step by step guide:

1. Create your first section for desktop and styling it appropriate for desktop

2. Duplicate the first section so you have a copy of it

3. Change the view to “Mobile view”

4. Change the layout of the section section so you are happy with it on mobile

5. Apply this custom CSS below, changing the ID’s within the quote marks only

Note:
When the code is applied, the only way to be able to edit the different content is by changing between “Desktop” and “Mobile” view.

Add to Custom CSS

/* Hide desktop version on mobile */
@media screen and (min-width:768px) {
[data-section-id="664f2434962eb056478bf734"] {
    display: none;
 }
}

/* Hide mobile version on desktop */
@media screen and (max-width:768px) {
[data-section-id="664b399037fa413c46c3ac00"] {
    display: none;
 }
}