Spotlight theme: Removing grey background on image banner

Store Design
, , , ,
1

I am using the spotflight theme and I have an image banner that looks fine on desktop but has a grey block under it when used on mobile. I managed to change this grey block to white and on the preview for the mobile site on shopify it looks like I fixed the issue; however, when I actually load the mobile website the grey block is still there despite me having fixed the issue on the mobile preview on the desktop by editing the code. I have already added all of the below to the base.CSS code to try and fix the issue:

}
@media screen and (max-width: 749px){
.password .banner__media {
position: absolute !important;
}
.banner__media.media {
background: white;
}
@media only screen and (max-width: 749px) {
.product-image-wrapper img {
opacity: 0 !important;
}
.card–card, .card–standard .card__inner {
background: transparent !important;
}

}

2

Could you please share store url?

3

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

Best regards,

Noah | PageFly

4

Hi @JS59 ,

  • You can edit by change color schema of Image banner section setting in theme editor:

view.png
view.png1186×855 157 KB

and this is the result:

view.png
view.png1195×854 137 KB

If it not work, you should add css code in file image-banner.liquid:

{% style %}
@media screen and (max-width: 749px){
 #Banner-{{ section.id }} .banner__box  {
   background: white !important;
  }
}
{% endstyle %}

I hope this helps! If it works for you, please mark it as a solution. I am very happy about that. Have a great day!