Help to make block invisible on mobileview

Store Design

Topic summary

A user seeks to hide a specific block within a mosaic grid on mobile view using CSS, without affecting other blocks.

Initial Solutions Proposed:

  • Use a media query targeting screens under 768px width with display: none applied to the block’s CSS class or ID
  • Replace .your-block-class with the actual class/ID of the target block

Key Challenge:

  • The block currently lacks a unique ID, making it difficult to target specifically
  • User needs guidance on locating the block’s ID or class in the theme code

Recommended Approach:

  1. Add an ID to the image block in the theme.liquid file
  2. Apply CSS using @media (max-width: 45em) with display: none targeting the specific element
  3. Paste the CSS code at the bottom of theme.css file in Assets

Current Status:

  • A working CSS solution using nth-child selector was provided for the specific mosaic grid item
  • User requested additional guidance on implementing the ID assignment in theme.liquid
  • Discussion remains open with offer for direct assistance
Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

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
Screenshot 2024-08-12 at 10.57.20.png2386×1170 545 KB

2

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;

}

}

3

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

4

Hi @JosenAndersen ,

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

5

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.

6

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

7

Acme_0-1723455868317.png
Acme_0-1723455868317.png952×205 25.1 KB

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

1 Like
8

https://n28gwc7dc4jyaq3c-64282296555.shopifypreview.com

9

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.

1 Like
10

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

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

12

Hi @JosenAndersen ,

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