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

Store Design
, ,
1

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!

1 Like
2

Hi @Eman_Akb ,

let try it

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

Result:

BSSCommerceB2B_0-1723081583426.png
BSSCommerceB2B_0-1723081583426.png528×921 116 KB

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

Best Regards

1 Like
3

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 tag:

Here is result:

BSSCommerceHDL_0-1723081594540.png
BSSCommerceHDL_0-1723081594540.png1864×628 59.7 KB

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 :heart_eyes: