Hide section on desktop (only show on mobile)

[chiaramunzi]

I would like to only show this section on mobile - not desktop

For some reason the CSS custom did not work. https://chickpeaoats.com/products/protein-hot-cereal-free-bag

[Moeed]

Hey @chiaramunzi

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[goldi07]

Hello @chiaramunzi

To hide the nutrition facts section on desktop and show it only on mobile, you can use a simple media query in your custom CSS.

Here’s how you can do it:

Step-by-step CSS

/* Default: hide on desktop */
.hide-on-desktop {
  display: none;
}

/* Show only on small screens (mobile) */
@media screen and (max-width: 749px) {
  .hide-on-desktop {
    display: block;
  }
}

1. How to apply it:
   Wrap the section (the nutrition facts) in a div with the class hide-on-desktop.

2. Paste the CSS above into:

. Online Store > Themes > Customize > Theme settings > Custom CSS (if your theme supports it), or

. Online Store > Themes > Edit code > Assets > base.css or custom.css (depending on the theme).

If it’s still showing on desktop, the issue might be CSS caching or selector specificity.

Debug Tip:
Use the browser inspector and check if the .hide-on-desktop class is being overridden. You might need to add !important as a last resort:

.hide-on-desktop {
  display: none !important;
}

@media screen and (max-width: 749px) {
  .hide-on-desktop {
    display: block !important;
  }
}

Thank you

[The_ScriptFlow]

Please paste this code in the end of bundle.base.css file.

@media only screen and (max-width: 767px) {
.section-content.relative.z-10.py-section-vertical-spacing.px-section {
  display: none;
}
}