Help to make block invisible on mobileview

[JosenAndersen]

Using CSS, how would I make a particular block in a mosaic grid invisible on mobile view? 

 

[Acme]

Hi
1. Go to online store -> theme -> edit code.
2. Open theme.css
@media only screen and (max-width: 767px) {
    .your-block-class {

         display: none;

     }

}

[JosenAndersen]

But does this make this one particular image invisible? (See my photo). 
I do not want it to make all blocks invisible on mobileview.

[Acme]

Actually, Your photo has not enough info for this. I need more info about parent component or class. Btw you can try like follow code.
@media only screen and (max-width: 767px) {
    .mosaic-grid__item-image img {

         display: none;

     }

}
you can replace .your-block-class with the actual CSS class or ID of the block you want to hide.

[JosenAndersen]

Where do I find the ID of the block I want to hide? 

[Acme]

You can find out id in parent component what you want to hide.

[JosenAndersen]

https://n28gwc7dc4jyaq3c-64282296555.shopifypreview.com

[Acme]

There is no id at the moment. if you want to hide the image, at first, you should set id for the image block in them.liquid.

And then you follow my first reply. Thanks.

[JosenAndersen]

Is that something you can let me know how to do? 
What code should I enter in theme.liquid? 

[namphan]

Hi @JosenAndersen,

Please send me the store link, I will check it for you

[namphan · Accepted solution]

Hi @JosenAndersen,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

@media (max-width: 45em){
#shopify-section-template--19339290280273__mosaic_grid_xaKVBM .mosaic-grid__item:nth-child(2) {
    display: none;
}
}

[namphan]

Hi @JosenAndersen,

If you have any questions, you can contact me directly.
Happy to help you 😊