Different headers images for each mobile pages same as desktop

Good Morning,
I have an issue in adding an Header image different for each single page on mobile.
I have managed to do it for desktop view but cannot apply the same images on mobile views.
I have found a CCS code to be used in this forum but it applies to all pages the same. I tried to use the page id but seems that the code is not properly typed.
mlcyacting.com
Thank you for the help

Hi,

Good Evening from here. Thank you for reaching out to us. I am happy to help with your queries.

It would be better if you can share the code you have applied. So perhaps I can start with it and make some corrections to suggest.

Regards,
Kharis
aThemes Support

Hello Kharis,
Thank you for the prompt reply.
The code is the following:

@media only screen and (max-width: 1024px) {
      .sydney-hero-area .header-image {
        background-image: url(http://mlcyachting.com/wp-content/uploads/2021/01/PHOTO-2020-04-16-12-43-49.jpg);
        height: 500px !important;
      }
}

Hi,

Thank you for sharing the code.

To set different images for your two pages, you can use page ID class. Here is the correction, that may be working for you.

    @media only screen and (max-width: 1024px) {
      .sydney-hero-area .header-image {
        height: 500px !important;
      }
      .page-id-165 .sydney-hero-area .header-image {
        background-image: url('http://mlcyachting.com/wp-content/uploads/2021/01/PHOTO-2020-04-16-12-43-49.jpg') !important;
      }
      .page-id-108 .sydney-hero-area .header-image {
        background-image: url('http://mlcyachting.com/other-image.jpg') !important;
      }
    }

Regards,
Kharis
aThemes Support

Dear Kharis,
Thank you for the reply, I will try and confirm.
Can you explain how can I find the page id number? I am now going to publish three other pages, will need to fond the page number for them.
Thank you for your support,
Marco

Hi Marco,

To find out the page ID class, open the page, then use the web browser’s inspector tool to view source the HTML code. And locate to the body tag.

Or, you can use this plugin for easier option.

Regards,
Kharis
aThemes Support

Hi Kharis,
Thank you very much, it works perfectly!!
I have installed the plugin and IDs re showed clearly int he page list!
Thank you
Best Regards
Marco

You’re welcome Marco!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support