How to adjust hero image size for optimal responsiveness on Refresh theme?

[pf2022]

Hey there 

I recently switched to "Refresh" theme and we are really happy with this. But the hero image is making some trouble. Do you know what the proper size is in this theme? It looks perfect on my laptop, but on my phone, its way too small. 🙂 

www.portivnsflasken.dk

[Sphurti]

you need to add different image setting for mobile image 

css:
@media screen and (min-width: 750px){
.destop-hide{display:none;}}//add this class for desktop image div
@media screen and (max-width: 749px){
.mobile-hide{display:none;}}//add this class for mobile image div
in schema :
{ "type": "image_picker", "id": "mob-image", "label": "mobile Image" }
<div class="destop-hide"><img src="{{ section.settings.mob-image" }}"></div>