Jump to content

Replace image seen when viewing on mobile

Recommended Posts

Site URL: https://the-go-to-gal.squarespace.com/landing-page%C2%A0

https://the-go-to-gal.squarespace.com/landing-page     P/Word - tgtg2022&

Hi brains trust, hoping someone might be able to help. 

I would like to replace #block-yui_3_17_2_1_1643777114126_12964 on the above page with an alternate image when viewed on the mobile version of the site. Is any one able to assist? I can't quite seem to figure it out...

The alternate image I am hoping to replace it with is - https://live.staticflickr.com/65535/51857413073_1041f8e3eb_o.png

 

Link to comment
  • Replies 3
  • Views 664
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Your page link doesn't work I'm afraid - it comes up with a 404 - so I can't really offer a good solution until I can actually see the page.

Regardless, at a guess based on your description, the following will very likely work:

@media (max-width: 768px) {
  #block-yui_3_17_2_1_1643777114126_12964 {
    img {
      opacity: 0!important;
    }
    .image-block-wrapper::after {
      background: url(https://live.staticflickr.com/65535/51857413073_1041f8e3eb_o.png);
      background-size: cover;
      background-repeat: no-repeat;
      opacity: 1 !important;
    }
  }
}

 

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment
12 hours ago, tillie said:

That code appears to change the image, but it is confined to a smaller bounding box so it cuts it off... any ideas on what might be making that happen? 

Change cover to contain and it'll fit it inside the box.

You can adjust height/width properties of the element to make it smaller/larger.

You may also want to adjust background-position

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

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.