How do I display a different image banner for mobile vs. desktop? (Dawn Theme)

[valkyriebg]

How do I display a different image banner for mobile vs. desktop? (Dawn Theme)

For example, a vertical image for mobile, and a horizontal image for desktop. 

mobile: 

Desktop

Here is my website (currently only displaying the image made for mobile): https://move-pad.com/

Thank you so much for your help.

[snnggest · Accepted solution]

Themes > Customise > Click on Image Banner section to open settings > Click Custom CSS and select the following code for the image

to show on desktop only: 

@media screen and (max-width: 750px) {
  .banner, slideshow-component {
    display: none;
  }
}

to show on mobile only 

@media screen and (min-width: 750px) {
  .banner, slideshow-component {
    display: none;
  }
}

[Guleria]

Hello @valkyriebg ,

I thought with Dawn  updated version option to upload different images for mobile and desktop is available but it's not.  

btw yes it's possible but not only with css. 

First we need to create an option in the section so the admin can upload different image for mobile.

Once the above part is done then we can use custom css to show different videos based on the mobile and desktop.

Problem solved don't forget to Like it and Mark it as Solution!
If you need help to implement  it you can contact me for services

You can find the email in the signature below.

Regards
Guleria