Make a Web Element appear on mobile view only

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/

Hello, I understand that you can have a web element appear only on desktop and to be hidden on mobile using this code:

@media only screen and (max-width:768px) {
div#block-BLOCK ID HERE>.sqs-block-content:first-child {
   display: none;
}
}

But I want to know if it is possible to show a web element (e.g. an image or text etc) just on mobile and not visible on desktop view? 

Please advise,

Many thanks!

Best,

Faiz

@media only screen and (min-width:769px) {
div#block-BLOCK ID HERE>.sqs-block-content:first-child {
   display: none;
}
}

That's awesome thanks so much! Works perfectly.

So is the code is basically saying that, any device with a greater width than 769px the block element will not show?

I hope I have understood the code correctly?!

yes.

In fact, if you use SS 7.1, it should be 768px, and SS 7.0 is 641px

OK yes that's great! I'm trying to learn the code rather than just copying + pasting so thank you!

Should I change this code then to:

@media only screen and (min-width:768px) {
div#block-BLOCK ID HERE>.sqs-block-content:first-child {
   display: none;
}
}

what about the code to hide on mobile device, should this stay the same as here?

@media only screen and (max-width:768px) {
div#block-BLOCK ID HERE>.sqs-block-content:first-child {
   display: none;
}
}

with mobile,

max-width:767px

OK great, I will change the code to hide on mobile device as here:

@media only screen and (max-width:767px) {
div#block-BLOCK ID HERE>.sqs-block-content:first-child {
   display: none;
}
}

Thank you so much for your time, I do appreciate your help. 

Sorry, just to add on here, as well as removing an element in mobile view, is it possible to remove an entire section so it doesn't appear on mobile view?

5 hours ago, scholarsayze said:

Sorry, just to add on here, as well as removing an element in mobile view, is it possible to remove an entire section so it doesn't appear on mobile view?

Which template do you use? or which SS version: 7.0 or 7.1?

Thanks Tuanphan I it's v7.1

On 6/10/2020 at 11:22 AM, scholarsayze said:

Sorry, just to add on here, as well as removing an element in mobile view, is it possible to remove an entire section so it doesn't appear on mobile view?

@scholarsayze yes it's possible to remove entire sections using CSS and media queries. 

Thanks so much works perfectly!!!

I followed the steps on this and, it worked, but I have a bunch of extra padding beneath the section I removed on the mobile version. Desktop version looks fine. Is there a way to fix this? 

Link: https://www.nationaltab.com/solutions

18 hours ago, meganntab said:

I followed the steps on this and, it worked, but I have a bunch of extra padding beneath the section I removed on the mobile version. Desktop version looks fine. Is there a way to fix this? 

Link: https://www.nationaltab.com/solutions

Hi. Target data-section-id, don't target block id.

Use this tool to find data section id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

The real question is why Squarespace makes designers jump through so many tedious hoops like it's 2010.

Just offer a completely obvious and simple toggle in section settings that allows me to display it on desktop or mobile like every other template builder has for over a decade! 

That's still woefully inadequate for truly useful functionality, but at least it's not forcing people to divine block IDs via browser inspection and then enter CSS that is far removed from the content and easy to lose track of, especially when having to do it a lot for an entire site. 

Arg, so annoying that I have to patiently explain this in 2024.