How can I make an image smaller on the desktop version only?

[Theo_Bee]

Hi! I would like to reduce the size of an image on my homepage, but only reduce it for the desktop version of my website. Is this possible and if yes, how would I do that? 

I have attached screenshots of how it looks on mobile and desktop. As you can see, on desktop it is very wide and cropped.

Please let me know if there are any details or information that I can provide that would be of help. 

Kind regards

Theo

Here is a screenshot of the image on desktop: 

Here is a screenshot of the image on mobile: 

[BSSCommerce-B2B · Accepted solution]

@Theo_Bee 

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

<style>
@media only screen and (min-width: 960px) {
  #Banner-template--23346802622794__image_banner_346q47 {
    transform: scale(0.8);
  }
}
</style>

Change the scale number if you want

If it helps you, please like and mark it as the solution.

Best Regards 😍

[Theo_Bee]

This worked perfectly 🙂 Thank you so much for your help!