Code to remove this section off desktop only

Store Design
1

Any help would be greatly appriciated

store( Blissbloom.shop )

p1
p1731×431 314 KB

2

hi blissbloomaesthetic ,

what kind of help you want?

3

Hi @blissbloomaesthetic

Go to Online Store > Themes > Actions > Edit Code > Assets > base.css
Paste your CSS at the bottom of base.css and click Save

@media (min-width: 1025px) {
  .banner--desktop-transparent {
    display: none;
  }
}

image
image1329×580 170 KB

4

This didnt seem to work

5

Go to Online Store > Themes > Actions > Edit Code > Assets > base.css
Paste your CSS at the top of base.css and click Save

6

This also didnt work

7

Hi @blissbloomaesthetic

Ok dear, please share collaborator code with me so I can check.

8

the collab code is 1407

9

Hi @blissbloomaesthetic

Please check it.

10

Hi, if you dont mind me asking. why do you want to remove that section from your website, because it seem to be the page that tells your customer what you do and what to do.

below is the simple step to hide the section rom desktop only:

  1. Go to your Shopify dashboard → Online Store → Themes.

  2. Click Customize on your active theme.

  3. Click the three dots (⋯) at the top-left corner → choose Edit code.

  4. Open the file named base.css, theme.css, or style.css under the Assets folder.

  5. Scroll to the bottom and paste this code:

@media screen and (min-width: 768px) {
  .shopify-section.section-image-banner {
    display: none !important;
  }
}
  1. Click Save, then refresh your store page.

That will hide the banner on desktop but keep it showing on mobile.

If it doesn’t work, right-click the banner → click Inspect, check the class name of the section, and replace .shopify-section.section-image-banner in the code with that one.