How can I auto-resize collection banner images for mobile view?

Technical Q&A
1

Looking for advice on how to get collection banner images to automatically resize on mobile format. Currently, they look great on desktop view, but get cut off on mobile view.https://1982candleco.com/collections/the-midnight-collection

588133D1-4988-4F85-B37C-427D0F91E350.png
588133D1-4988-4F85-B37C-427D0F91E350.png1242×2688 300 KB

2

Hello @VicR ,

Use css

background-size: 100%;

for this image within media queries.

e.g.

@media only screen and (max-width: 768px){
  .PageHeader img{
      background-size: 100%;
   }
}

Thanks

3

Thank you so much for the reply. I have very limited knowledge around coding. Where would I place this? Doni need to add the image url to it?