Hide Section On Mobile

[biznazz101]

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)

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!

[suyash1]

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

[biznazz101]

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.

Thanks!

[PageFly-Oliver]

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

<style>
@media screen and (max-width: 768px) {
  div#shopify-section-template--22324472742161__image-image-with-text-block {
    display: none !important;
    visibility: hidden !important;
  }
}
 @media screen and (min-width: 767px) {
  div#shopify-section-template--22324472742161__image_image_with_text_block_AJJwYm {
    display: none !important;
    visibility: hidden !important;
  }
}
</style>

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly