Resizing image in mobile view

Hello I would like to resize my main image from the website on mobile view so that it shows better.

Currently it's only showing very small part of it, and resizing seems like it's only doable via code. 

Can anyone help?

My website is www.achimflowerstudio.com (pw: Welcome)

Here's a screenshot of my home.

Hi! 

I suggest you set up a mobile fallback for that purpose. You can have a second section only for mobile so you can adjust the photo specifically for mobile or even choose a different one for smartphones.

1. Duplicate the section
2. switch to mobile view (switch top right)  and adjust the second section for mobile
3. go to your CSS Section ( WEBSITE > PAGES > scroll down WEBSITE TOOLS > CSS) 

4). apply the following CSS
(note: you need your own classes for that ( if you're not familiar with the browser console, install a browser extension called "Squarespace ID finder"
and replace the ID's parts e.g. section[data-section-id="65572d36a73fd670fa413e72"]

@media only screen and (max-width: 840px) { section[data-section-id="65572d36a73fd670fa413e72"]{display:none}}

@media only screen and (min-width: 840px) { section[data-section-id="65572d36a73fd670fa413e72"]{display:none}}

This will get you a result like this:

Hi @ArminB!

I'm coming across a similar issue and tried your code, but it simply removes the duplicate section alltogether from both the mobile and desktop site instead of leaving it on mobile and removing it on desktop. How can I fix this?

Nevermind! I figured it out!