Hiding an image displayed on mobile version 7.1

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 */

block-b3f224c6c3725d7d5022 is a spacer block, so it's probably working, just on the wrong element.

Which image are you trying to hide?

Well that could be part of the problem lol. I'm trying to hide the image near the top of the home page which says "Digital Marketing"

On 9/30/2020 at 10:56 PM, JarynD said:

Well that could be part of the problem lol. I'm trying to hide the image near the top of the home page which says "Digital Marketing"

Add to Home > Design > Custom CSS

/* hide digital on mobile */
@media screen and (max-width:767px) {
[data-section-id="5ecc2ed3063db750f2a4c909"] {
	display: none;
}
}

That did it, you're incredible! Thank you!

@tuanphan is there also a solution to hide it on tablets too? So scho a element only on desktop? Not on Tablet or mobile? 

I want to hide some buttons, i could hide them on mobile, but they still shown on the tablet. 

Thanks in advance 

21 hours ago, Eggers said:

@tuanphan is there also a solution to hide it on tablets too? So scho a element only on desktop? Not on Tablet or mobile? 

I want to hide some buttons, i could hide them on mobile, but they still shown on the tablet. 

Thanks in advance 

Tablet + Mobile use this query

@media screen and (max-width:991px) {enter CSS to hide buttons here}

On 2/16/2023 at 11:07 PM, Soka said:

I am trying to hide images on my mobile version of the site, as it makes the page too long with them (see the image attached). How do I do this:

https://buttercup-guitar-drts.squarespace.com/config/design/custom-css

Hi,

You mean Health Care Image?

This is close to what I need to do, but the whitespace remains. 

The block I want to hide on mobile is the first block on my page, an image that's inside of a "fluid engine block."

It appears to be identified as:

fe-block fe-block-yui_3_17_2_1_1680573369109_13078

On 4/4/2023 at 12:51 PM, RB-LA said:

This is close to what I need to do, but the whitespace remains. 

The block I want to hide on mobile is the first block on my page, an image that's inside of a "fluid engine block."

It appears to be identified as:

fe-block fe-block-yui_3_17_2_1_1680573369109_13078

If you share link to your site, we can check ID easier