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
  • 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;
    }
  }
}

 

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. Some links may be affiliate/referral links.

You can also thank me by buying me a coffee .

Squarespace Tips & Tricks: @squareskills (Youtube 📺 Tutorials - Resource site coming soon)

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

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. Some links may be affiliate/referral links.

You can also thank me by buying me a coffee .

Squarespace Tips & Tricks: @squareskills (Youtube 📺 Tutorials - Resource site coming soon)

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.