Tinxy7 Posted November 13, 2020 Share Posted November 13, 2020 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! Beyondspace 1 Link to comment
Beyondspace Posted November 13, 2020 Share Posted November 13, 2020 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 HighlighterIf 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
Beyondspace Posted November 13, 2020 Share Posted November 13, 2020 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 HighlighterIf 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
Beyondspace Posted November 13, 2020 Share Posted November 13, 2020 @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 HighlighterIf 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
Tinxy7 Posted November 13, 2020 Author Share Posted November 13, 2020 11 minutes ago, bangank36 said: @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
Beyondspace Posted November 13, 2020 Share Posted November 13, 2020 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 HighlighterIf 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
Tinxy7 Posted November 13, 2020 Author Share Posted November 13, 2020 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?!?! Beyondspace 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment