Remove banner section for mobile only - Impulse Theme

[VIBO]

Hi,

store - vibovisionboards.myshopify.com

pw - whauch

I am trying to remove the below section for mobile users. I have so far succeeded in removing the advanced part of this section using the following code:

@media (max-width: 749px){
.type-banner + * + .type-advanced{
display: none !important;
}
}

This works to remove the type-advanced of the section for mobile, however it does not remove the type-banner section. Below screen shot shows the banner that I am attempting to remove across all pages for mobile.

Appreciate your help in achieving this.

[SetuBridge_1]

Hello @VIBO

Greetings!!

Please follow these steps:

• Step 1: Go to Online store > Themes > Actions > Edit code->asstes->theme.css

@media (max-width: 749px){
  .main-content>div:nth-child(3)> div[data-section-type="promo-grid"]{
    display: none;
  }
}

[VIBO]

Hi,

Thanks, this works perfectly for the home page. Is there any way to ensure that this code also removes the banner section on the product pages as well?I can still see the banner appearing on my product pages (see below).

Thanks for your help!

[SetuBridge_1]

Hello @VIBO

Greetings!!

Please replace with this code

Please follow these steps:

• Step 1: Go to Online store > Themes > Actions > Edit code->asstes->theme.css

@media (max-width: 749px){
  .main-content>div:nth-child(3)> div[data-section-type="promo-grid"],.main-content .promo-grid__container{
    display: none;
  }
}

[VIBO]

Hi DipenPachal, Thanks for your help here I really appreciate it.

Unfortunately this hides the other promo grid that I have on my home page, which I would like to keep in place.

Is there any way that I can hide specific sections in my theme? For example, what I am trying to achieve is to hide specifically the below two sections for mobile only.

Again thanks for your help.

Hide specifically these sections for mobile only: