header image appearing different size on iphone and ipad

Blaskan
1

Hello. How can I get it so that my header image doesn’t get cut off when looking at my website from a phone or an ipad? My website is ecowandering.com

2

Hi,

Those header images are set as background, so it won’t be changed in the mobile, but you can change some image using CSS,

Hi,

Please add this Custom CSS in Appearance -> Customize -> Additional CSS,

@media only screen 
  and (max-width: 480px) {
.custom-header {
    background-image: url('https://cdn.colorlib.com/illdy/wp-content/uploads/sites/11/2016/03/front-page-project-1.jpg') !important;
height: 200px !important;
}
}

Change the image URL according to your needs, upload a smaller width image, and adjust the height according to your needs.

Let us know,

Thanks,
laranz.

3

Hello Laranz, thanks for your help.
This has caused another issue though. Since I have a different header image for each page, once I add that CSS it changes all the header images to the same header when viewing from my mobile. How do I edit the CSS to only change the singular pages header image size for mobile view?

Thanks, Shianne

4

HI there

You can use this css to apply code only for homepage:

@media only screen 
  and (max-width: 480px) {
.home .custom-header {
    background-image: url('https://cdn.colorlib.com/illdy/wp-content/uploads/sites/11/2016/03/front-page-project-1.jpg') !important;
height: 200px !important;
}
}
5

Still, I am getting an error. While doing this on iPad. If is there any other suggestion then kindly explain it.
https://newzealand.babasupport.org/

6

Hi,

You want to target all single pages and posts? If so, For single page, you can use this, or if you want any particular page then you can change the CSS accordingly. The website isn’t loading for me though.

@media only screen 
  and (max-width: 480px) {
.single .custom-header {
    background-image: url('https://cdn.colorlib.com/illdy/wp-content/uploads/sites/11/2016/03/front-page-project-1.jpg') !important;
height: 200px !important;
}

If this isn’t solve the issue, please can you state the issue with some screenshots to explain the issue?

Let us know,

Thanks,
laranz.