[RodeBoy]

I am working on http://www.emmaelizabethspmu.co.uk for a client. The Header Media displays fine on a desktop and in landscape mode on my mobile, but as you can see does not in portrait on a mobile. What is the best way around this please? Is it possible to have an alternative image display JUST in portrait mode on a mobile? If so, could you advise the CSS coding please? Thanks, Chris

[Skandha]

@rodeboy: Hello there,

Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.custom-header {
background-image: unset !important;
}
.custom-header .custom-header-media img {
display: block !important;
object-fit: unset !important;
}
.custom-header, .has-section-background-image {
z-index: 0;
}

Let me know if this works out!
Kind Regards,
Skandha

[RodeBoy]

Thanks Skandha. This certainly does the job, but as you can see re-shapes my clients logo. I can fully understand the issue, particularly when there is writing involved. Obviously when there is an image it can work nicely with suitable designing. I will speak to my client to see what she wants, and try to encourage an image as the header media.

Is there not an option to style it like the Rock Star Pro theme where the slider/header image just goes to the top (on mobiles in portrait)  and you lose the full screen look – does that make sense?!

Chris

[RodeBoy]

I have just noticed that the coding messes up the headers on the posts pages .. so unfortunately it doesn’t work! No doubt you will advise further Skandha.

Thanks, Chris

[Skandha]

@rodeboy: Hello there,

Can you please add the following Code instead?

.custom-header {
background-image: unset !important;
}
.custom-header .custom-header-media img {
display: block !important;
object-fit: unset !important;
}
.custom-header {
z-index: 0 !important;
}

Let me know if this works out!
Kind Regards,
Skandha

[RodeBoy]

Hi Skandha, whilst that coding works on the home page when you then go to a post the header on there is full width squeezed into the width of the screen. Is my suggestion of styling it like the Rock Star Pro theme header not an option?

Thanks, Chris

[RodeBoy]

Any further thoughts on this Skandha please, as my client is pushing to get this sorted? Thanks

[RodeBoy]

Can I please have a response as soon as possible? Thanks

[Skandha]

@rodeboy: Hello Chris,

Sorry for the late reply. To have the header image on posts display like in the Rock Star theme you will need to upload images of around 1920*600px which has full width but relatively smaller height. Here as the image used in the posts is 1000x750px it will cover a lot of height and you will need to scroll to view the content of your posts. Doing this will change the featured image size on the archive page as well.

Let me know what you would like to do.
Kind Regards,
Skandha

[RodeBoy]

Thanks Skandha, I think that the answer is for my client to find a suitable image that works with the Header Media element of this theme.

Thanks for your time.

[Author]

Posts