Re: Help to make block invisible on mobileview

Solved

Help to make block invisible on mobileview

JosenAndersen
Tourist
16 0 0

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

 

Screenshot 2024-08-12 at 10.57.20.png

Accepted Solution (1)
namphan
Shopify Partner
1547 193 214

This is an 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;
}
}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? [email protected]

View solution in original post

Replies 11 (11)

Acme
Shopify Partner
69 8 13

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
Tourist
16 0 0

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
Shopify Partner
69 8 13

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-width767px) {
    .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
Tourist
16 0 0

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

Acme
Shopify Partner
69 8 13

Acme_0-1723455868317.png

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

Acme
Shopify Partner
69 8 13

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
Tourist
16 0 0

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

namphan
Shopify Partner
1547 193 214

Hi @JosenAndersen,

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

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? [email protected]
namphan
Shopify Partner
1547 193 214

This is an 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;
}
}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? [email protected]
namphan
Shopify Partner
1547 193 214

Hi @JosenAndersen,

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

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? [email protected]