Page Header dynamic feature image not responsive for tablet and mobile

Hi there,

can you provide a link to the site? You can edit your original post and use the Site URL field for privacy

Hi David,

Please find below the link to a test post:

https://willingo.com/ph-test/

Please have a look and let me know what I should do?

Thanks.

PS: Looks like the Site URL field is only available when a new support topic is opened.

OK, so its a landscape image on full height page, which by default is set to cover. So it will be cropped on mobile. Choices:

1. Replace the image on mobile for a portrait image.
2. Stop using full height on mobile and set the image to fit horizontally.

Let me know which option and i can provide the CSS

BTW - You can Edit the first post in a topic to get access to the Site URL field and then just resubmit

Hi David,

Could you please give me CSS for both choices. I will test and see which one is best.

Is there a way to use both of them, say, one choice for one template and the other choice for another?

Many thanks.

OK:

Option 1

/* Switch Image on Mobile */
@media (max-width: 768px) {
    .generate-content-header {
        background-image: url('image_url.jpg')
    }
}

Option 2

/* Adjust container height - change PX to suit */
@media (max-width: 768px) {
    .generate-content-header {
        height: 300px !important;
    }
}

To apply it to specific page headers you would need to use the Page Header ID. So to effect just your current page header you would replace .generate-content-header { with #page-header-12061 {

The ID number can be found by editing the page header and looking at the browser URL - look for post=####

Many thanks David. That's very useful and clear instructions.

Don't you have a rating system in place? I'd be pleased to hit five-star for your support.

You're welcome. We don't have a support rating. We all try our best.

Understood! Thanks. Happy to have your help.

On this one more question. It also works with Elements Header?
I need to change the image for mobile by another responsive image.

Thanks. David.

Hi there,

Any chance you can open a new topic for your question?

Thanks!