Hide a section on desktop using Impulse Theme

Shopify Discussion

Topic summary

A user needed to hide a promotional section on desktop while keeping it visible on mobile in the Shopify Impulse Theme.

Solutions Provided:

Two community members offered CSS-based solutions:

  • Option 1: Add a media query targeting the specific section ID to the bottom of the CSS file, setting display: none for screens wider than 767px

  • Option 2: Navigate to online store > themes > actions > edit code > assets > modules > promo-types.css (line 15) and add a media query for screens wider than 769px, targeting .promo-grid--space-bottom with display: none and padding-bottom: 75px

Resolution:

The issue was successfully resolved—the user confirmed one of the solutions worked perfectly. Both approaches use CSS media queries to selectively hide content based on screen width.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

I’m looking to hide the promotional section on desktop view, but keep it visible on mobile. I’m using the Impulse Theme. Please advise.

https://sakidiamonds.com/collections/womens-rings

2

hello , Thetm

hope you doing good

Put the code bottom of css file

@media only screen and (min-width: 767px) {
div#shopify-section-template–16952523784346__promo_grid_etn3EV {
display: none;
}
}

Let me know if you face any issue

Thanks

3

Hello @thetm

Go to online store ---------> themes --------------> actions ------> edit code-------> assets-------> modules---------> promo-types.css--------- line no. 15
add this code.

@media only screen and (min-width: 769px) {
  .promo-grid--space-bottom {
    padding-bottom: 75px;
    display: none;
  }
}

and the result will be

12.png
12.png436×859 154 KB

11.png
11.png1243×642 100 KB

If you find this helpful, please like and mark the job as completed.
Thanks

1 Like
4

Thank you. That worked perfectly.