Hide Section On Mobile

Store Design
, , , ,
1

Hello, I am trying to hide this section on mobile (it’s the same section twice. One is hidden on desktop (centered text) and one is hidden on mobile (right aligned text)

biznazz101_0-1712195845674.png
biznazz101_0-1712195845674.png1287×1399 345 KB

I have done this many times without issue, but for some reason it is still displaying both sections on mobile. Regardless of what I set the px width to. This is the code I am using:

/* Homepage Build A Box Banner */
   
   @media screen and (max-width: 734px) {
  div#shopify-section-template--22324472742161__image-image-with-text-block {
    display: none !important;
    visibility: hidden !important;
  }
}
 @media screen and (min-width: 735px) {
  div#shopify-section-template--22324472742161__image_image_with_text_block_AJJwYm {
    display: none !important;
    visibility: hidden !important;
  }

Store URL: https://wittbizzsnackwi.com

Any help would be appreciated!

Thanks!

2

@biznazz101 - did you make any changes? I am not able to see both

3

No I have not, if on desktop you may have to make your browser window smaller in order to see both. Currently when in fullscreen mode, it only shows one, but if I make the window smaller it shows both.

biznazz101_1-1712197518909.png
biznazz101_1-1712197518909.png2704×1523 677 KB

biznazz101_0-1712197491102.png
biznazz101_0-1712197491102.png1287×1399 345 KB

Thanks!

4

Hi @biznazz101 ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly