header image on mobile devices – Nisarg

The space at the bottom of the screen is coming from this css rule:

.site-header {
    margin-bottom: 0px;
    width: 100%;
    height: 425px;
}

You have a fixed height of 425px. you can either change this value to auto;

can change this media query to fix the weird view problem.

@media (max-width: 767px)
.site-header {
    background-size: 768px auto
    /* height: 204.947976879px; */
}

try changing the background-size to cover background-size;cover.

• This reply was modified 8 years, 2 months ago by mrtom414.

Thanks for your help. I did try these and yes, it does get rid of the space on mobile devices, however, is there a way to “shrink the width of the header on the small screen and increase its depth so that the whole header displays?

sorry i should have made it more clear on the last line the

background-size:cover

should make it cover the area.

you can adjust the image size but it will cause the image to be distorted. You could also crop the image manually and set the background to that image when the screen is smaller.

This statement set the image background.

.site-header {
    background: url(https://outofthehood.com/wp-content/uploads/2016/09/cropped-header8165.jpg) no-repeat scroll top;
}

you would just have to change the image file from header8165.jpg to your new image.

The statement would have to reside in the same media query as the above example.

@media (max-width: 767px)

sorry, not resolved; not responsive on mobile phone; shit