Alternate image for Jumbotron in mobile

I picked up this code from a reply you made to a ticket back in May, it changes the image on mobile phones on the interior pages of the site, but not the Jumbotron image. How would I modify the code to allow me to create an alternate “portrait” image for moBile Jumbotron?

My site is chrisconnellyphotography.com

FROM OLDER POST;
Support
Moderator
Hi there,
Thanks for keeping in touch with us.

This issue is one of many that comes with the whole idea of getting websites to be viewable on mobile phones and is something that is really hard to control, especially with the use of images that were never really made to be used on phones, an issue that is totally beyond our control, as a result, we have times like this.

I went on @branwyn151‘s site and I picked my brain for quite a while, and then I had a bit of a eureka moment:

From your jumbotron image, you could try to crop a mobile version from it (height-biased rectangle, approximately 640x960px), upload that, and get the link, and add it to the CSS here:

@media(max-width:550px){
#header{
background-image: url(“https://yourimagelinkhere/”)!important;
}
}
You will then be able to replace the widescreen image with a portrait mobile friendly image.

I hope this helps.

Best Regards,
Support

Hello there,

I hope you are doing well today.

You can use the following CSS code to change the jumbotron image on mobile by going to Appearance > Customize > Additional CSS and pasting it there.

/*Mobile jumbotron image*/
@media(max-width:550px){
#header.header-front-page{
background-image: url(“https://yourimagelinkhere/”)!important;
}
}

Best Regards,
Support

Thanks for getting back to me - when I insert that code, the image when the phone is help portrait is blank not the alternate image, but the image when then phone is held landscape is the main image (which is correct). Could you view it on a phone and see how to fix it?

Chris

Please see above.

Chris

Hello there,

Did you replace “https://yourimagelinkhere/” with a link to the image that you want to use in its place?

Best Regards,
Support

Yes, and Imtried several different images. All the same result. On mobile, in portrait orientation, only the background shows. Turn the phone landscape and the other image displays.