Header Image Size / Fit Options

How can I adjust the header image(s) to better fit multiple screen sizes. All 5 of my images are cropped too closely on the right and left and top. I created them using the recommended image size listed in the customizer. I have adjusted the Customizer to the tallest 900. Either a CSS or style sheet modification would be Okay. I would just like it to show the full image on all screen sizes. I have turned off the pro option of header phone number/contact info because it covered even more of the image(s).

MyNEWBusiness.site

Hi @Jriangle

Please try these CSS code to make the header image fit to the screen (desktop and mobile screen):


@media only screen and (min-width: 992px){
   .header-image {
    height: 678px;
   }
}

@media only screen and (min-width: 991px){
   .header-image {
    height: 400px;
   }
}

@media only screen and (min-width: 460px){
   .header-image {
    height: 240px;
   }
}

Feel free to adjust the value of the height from the Code in above.

Regards,
Awan

sorry… It didn’t work as I needed. I just re-created images and will use Crelly. Thank you anyway. I really appreciate your help Awan. Next question above. :slight_smile: