You can set 2 different hero pictures to your web pages, one to be shown on desktop, and another one to be shown on mobile browsers.
Having a separate hero image for mobile ensures it fits properly on smaller screens, captures attention and enhances user experience, while maintaining a visually pleasing and consistent design.
To set a mobile hero, go to the webpage, click on Page Settings > Hero, there you can upload your image in the Mobile Hero Image section. See below:
Note that the mobile hero will be shown on screens with a width of 780 pixels or less.
Best dimensions for hero mobile images: 800 x 1000 pixels.