Jump to content

Hide Blocks on Desktop/Mobile

Go to solution Solved by SaranyaDesigns,

Recommended Posts

Posted

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,

  • Solution
Posted

@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;
	}
}

 

Posted
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! :+)

Posted
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:image.thumb.png.d88afef5006b1552b52b28441d59a196.png

Posted
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:image.thumb.png.d88afef5006b1552b52b28441d59a196.png

Boy, a lot to learn. Thank you again

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.