Removing the text and buttons on the imagine banner only on mobile

[Eman_Akb]

Hi everyone, I really need to remove the buttons and text from the image banner on mobile, since the text and buttons go under the picture, instead of on the picture. On the picture does not look good on mobile in my opinion, so I want to remove it entirely without getting rid of the picture.

My website is: https://filtrina.com/

I have already tried inserting the following code in my base.css file with no luck:

@media only screen and (max-width: 749px){
.banner--stacked .banner__box {
display: none !important;
}
}

Any additional support would be very much appreciated, Thanks!

[BSSCommerce-B2B · Accepted solution]

Hi @Eman_Akb, 

let try it 

@media only screen and (max-width: 749px){
  .banner__content .banner__box {
    display: none !important;
  }
}

Result: 

If it helps you, please like and mark it as the solution.

Best Regards

[BSSCommerce-HDL]

Hi @Eman_Akb, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
@media only screen and (max-width: 749px){
  .banner__content.banner__content--middle-center {
    display: none !important;
   }
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍