Hide Blocks on Desktop/Mobile

Hi all!

This seems like a pretty simple question, but I need help with making a block (text block) visible on mobile, but not desktop. My website is jrmyprkr.earth, and the text block directly in the middle of homepage is what I'd like to display on mobile. I did some research and came away with a code that's supposed to work, but didn't do anything beyond messing up my footer, weirdly. Here's that code:

@media only screen and (min-width: 640px) {
#block-yui_3_17_2_1_1699765625613_2671 {
   display: none;
 }
}

Any help would be appreciated!

Best,

7 minutes ago, SaranyaDesigns said:

@jrmyprkr you're close... you found the right block, but it's a class not an ID, so adjust your code to this:

@media only screen and (min-width: 640px) {
	.block-yui_3_17_2_1_1699765625613_2671 {
   		display: none;
	}
}

If that still doesn't work, include !important like this:

@media only screen and (min-width: 640px) {
	.block-yui_3_17_2_1_1699765625613_2671 {
   		display: none !important;
	}
}

 

Hm, I don't know much about Classes vs ID's, but I used the first one and then changed the "." before "block", to "#", and it worked perfectly. Thank you so much! :+)

4 minutes ago, jrmyprkr said:

Hm, I don't know much about Classes vs ID's, but I used the first one and then changed the "." before "block", to "#", and it worked perfectly. Thank you so much! :+)

When you're in the inspector window, you can see in the coding when it's a class and when it's an ID - you would use "." to select classes and "#" to select IDs. In this case, it looks like either would work as the selector is used in two places for the same block, see screenshot:

11 minutes ago, SaranyaDesigns said:

When you're in the inspector window, you can see in the coding when it's a class and when it's an ID - you would use "." to select classes and "#" to select IDs. In this case, it looks like either would work as the selector is used in two places for the same block, see screenshot:

Boy, a lot to learn. Thank you again