Cubecom

I need to insert a code that would zoom the image when the cursor is hovered over it and when clicked on takes you to a certain page. The code works but it messes up the appearance of the boxes when it's viewed on a smaller (laptop) screen. I need the code to be responsive on all types of screens. For reference, the larger desktop screen is around 24"x13.5" & the smaller (laptop) screen is around 13.5"x7.5" . My code: <style> .hover-image { overflow: hidden; width: 100%; height: auto; max-height: 350px; } .hover-image img { transition: transform 0.3s ease, filter 0.3s ease; width: 100%; height: auto; display: block; } .hover-image img:hover { transform: scale(0.5,0.5); } </style> <div class="hover-image"> <a href="https://www.cubecom.ca/605-rogers-rd-york " target="_blank"> <img src="https://static1.squarespace.com/static/66991b4abbb62d2d2621ee4f/t/66a8fff5dce3b53f0d348da2/1722351607151/Untitled+design+%283%29.png" alt="Descriptive Text"> </a> </div> In the screenshots you can see that the tittles move up when I view it on a small screen. www.cubecom.ca Please help!

Hello. How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. Is there some kind of custom CSS I can include Please let me know

I am creating a splash page, and need to remove the footer on just one page of my site. How do I do this?