Issue with Full-Screen Crop in Debut Theme

Technical Q&A
1

Hello,

I’m having issues with overlapping my header and the main image on my site. I’m using the Debut Theme. The image looks great on Mobile and on Desktop mode. When it’s in Full-Screen, the image gets chopped off or overlapped by the header. I’ve tried adding white space to the image, but it doesn’t help.

Can you help me figure out how to fix this? www.narwhalcollection.com

Screen Shot 2021-08-06 at 1.22.52 PM.jpg
Screen Shot 2021-08-06 at 1.22.52 PM.jpg1956×1326 284 KB

2

That happen because your image height is greater than 475px and this value is hard-coded in the theme CSS file.

@media only screen and (min-width: 750px) {
    .hero--medium {
        height: 475px;
    }
}

You could increase this value to 830px for better result.

You can try to add this code to the end of you theme.css file

@media only screen and (min-width: 750px) {
    .hero--medium {
        height: 830px;
    }
}