Site URL: https://www.deviantdigitalservices.com/
I'm trying to hide an image block on mobile but so far the CSS code I've inserted is not working. See below for the code I'm using under Design > Custom CSS
I've watched YouTube videos and found previous threads in the forum with this code suggestion which make sense and other users vouch for. The problem, I think, is I have 7.1 version of Squarespace. Even when I ask support they're not sure why the code isn't applying properly and they directed me here.
I tried simply resizing the image instead, which looks good on the mobile emulator within Squarespace. But when I actually go to the site to test on an android or apple device, the image is not displaying properly so it looks like removing is my only choice. Has anyone had any luck with their CSS code for the newest version of Squarespace? The following is not cutting it for me:
/* CSS FOR TABLET AND MOBILE */
@mobile: ~"only screen and (max-width: 640px)";
@tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)";
/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/
/* Insert Code for Tablet Above This Line */
}
/* CSS FOR MOBILE */
@media only screen and (max-width: 640px) {
#block-b3f224c6c3725d7d5022 {
display: none;
}
}
/* Insert Code for Mobile Above This Line */