Jump to content

2nd Image Hover on mobile site too small!

Recommended Posts

Site URL: https://dogfish-clarinet-npzm.squarespace.com

I have copied a CSS to create some images that when you hover over change to another image.  They look great in the site however when you see them on the mobile site version they are coming up tiny!  They obviously can't 'hover' because its phone or iPad which is fine.  Another issue is that if someone clicks on them they are sent to a page with just that image, is there a way of disabling the click so it ignores it and doesn't go anywhere?

The website is password protected but happy to give it out if needed!!

Thanks in advance for any help!

Link to comment

Please send password to check

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Where is the page with the hover image?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

image.thumb.png.f4b1715489e1f4f4498254b78eb1cc66.png

@media only screen and (max-width: 640px) {
   section[data-section-id="5fa54cf09c6d8029943d91c9"] .span-2 {
    width: 33.333% !important;
    float: left !important;
  }
  section[data-section-id="5fa54cf09c6d8029943d91c9"] .span-2 .sqs-block-content a > div[id*=img-hover] {
    height: 20vw !important;
    width: 20vw !important;
  }
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
11 minutes ago, bangank36 said:

image.thumb.png.f4b1715489e1f4f4498254b78eb1cc66.png


@media only screen and (max-width: 640px) {
   section[data-section-id="5fa54cf09c6d8029943d91c9"] .span-2 {
    width: 33.333% !important;
    float: left !important;
  }
  section[data-section-id="5fa54cf09c6d8029943d91c9"] .span-2 .sqs-block-content a > div[id*=img-hover] {
    height: 20vw !important;
    width: 20vw !important;
  }
}

 

Yes this is it!!

 

Link to comment

Please copy the custom code to custom css

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
1 minute ago, bangank36 said:

Please copy the custom code to custom css

OMG this is absolutely PERFECT!!!!!  Can't thank you enough, this looks brilliant... wasn't sure about posting on here but what an awesome and quick response!!

 

Any chance you can help with the whole 'clicking on' issue whilst you are here lol?!?!

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.