Jump to content

change image for mobile

Recommended Posts

  • Replies 1
  • Views 867
  • Created
  • Last Reply

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.