Support » Theme: Nisarg » header image on mobile devices – Nisarg

  • Using the Nisarg theme and finding that my header image on the site http://outofthehood.com/ will not display correctly on mobile devices. The image is at 100% … but will not fit the screen and there is a huge space between the bottom of the image and the top of the page content. How can I fix this?

Viewing 4 replies - 1 through 4 (of 4 total)
  • 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 4 years, 4 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(http://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

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘header image on mobile devices – Nisarg’ is closed to new replies.