How can I make my homepage banners mobile friendly?

[Agrima]

Hi I’m trying to make my homepage banners mobile friendly however unable to do so. Kindly help me!

My URL is www.tracerindia.com

[KetanKumar]

@Agrima

can you please confirm

[Prezentech]

Hi @Agrima ,

Thank you for reaching out to the Shopify forums!

Let me quickly fix that issue for you.

Please add the below CSS in your base.css file.

@media screen and (min-width: 750px) {
.banner--small:not(.banner--adapt) {
    min-height: 30rem;
}
.banner__box {
    width: auto;
    min-width: 33rem;
   padding: 0rem 0.5rem;
}
}

@media screen and (min-width: 450px) {
.banner--small:not(.banner--adapt) {
    min-height: 30rem;
}
.banner__box {
    width: auto;
    min-width: 33rem;
   padding: 0rem 0.5rem;
}
}

If its working on your store then, please do not forget to accept this solution
Thanks & Regards,
Prezen Tech

[Agrima]

It’s not working. There was already a similar code in the file. Kindly check.

[Agrima]

Yes this is the website

[KetanKumar]

@Agrima

are you confirm layout

[Agrima]

Can you please clarify what you mean? I want the banner to show as it does on desktop. Presently it’s showing like this