Hide Section On Mobile

biznazz101
Shopify Partner
494 50 89

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

 


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!

Don't hesitate to reach out for more help with your store.
SEE OUR TASK STORE or check us out via our profile! FREE STORE AUDIT
Replies 3 (3)

suyash1
Shopify Partner
9222 1146 1493

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
biznazz101
Shopify Partner
494 50 89

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_0-1712197491102.png

 


Thanks!

Don't hesitate to reach out for more help with your store.
SEE OUR TASK STORE or check us out via our profile! FREE STORE AUDIT

PageFly-Oliver
Astronaut
878 190 171

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.