Images with Text Overlay and Collection Header images not responsive in Debut Theme

[freewheeling]

Hello,

Some images are not responsive to mobile and are instead showing as smaller rectangles instead of readable squares like some of my sites other images.  

The text overlay at the top of the homepage, Custom Content Images and Collection Header images are appearing not responsive like the gallery images are.

https://freewheelingcafe.com/

Thanks any help!

[Wish-It]

Can you share screenshot of the images that you are talking about? On my screen the website seems to be responsive.

[freewheeling]

Sure, the 2 header images are smaller rectangles compared to the last image which resizes as a square making the image and text easier to view.  Let me know if you have any other questions.

Thanks!

[Wish-It]

You can increase the height of the banner to show bigger image, try this CSS and see if this is how you want.

@media only screen and (max-width: 749px){
.collection-hero__image {
    height: 264px;
    background-size: cover;
}
.hero--large {
    background-size: cover;
    height: 264px;
}
}

[freewheeling]

I'll consider that later on on. Can this script be added with out the app into an existing code in debut?

[Wish-It]

Yes, add it to the end of themes.scss file.

[freewheeling]

@Wish-It Thank you, that worked on the Collection headers. What about the homepage Image with Text overlay image at the top of the screen? It doesn't fix that one.  Thanks again!