Jump to content

change image for mobile

Recommended Posts

can't see your site because it's not published but broadly speaking add the two images you want in different sections on your page. find the two section IDs and then add css to turn them on or off depending on whether or not its viewed in mobile. 

 similar to the css in this post

section[data-section-id="6108bec0e3a3c73804194bf7"] {
    display:block;
}
section[data-section-id="61258a40711e8b5459fb0271"] {
    display:none;
}

@media screen and (max-width: 768px) {
    section[data-section-id="6108bec0e3a3c73804194bf7"] {
        display:none;
    }
    section[data-section-id="61258a40711e8b5459fb0271"] {
        display:block;
    }
}

to find your section ids, use the squarespace id finder chrome section or inspect the source of your website.

 

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.