SarahHalbeisen

Thank you so much! This did the trick.

No, it's the image above – the one of the butterfly. I disabled the CSS that I used to adjust it, so you can see it. Now the image takes up the whole width of the screen and I would like to adjust it to 25% of its size. If I do so, all images are smaller. However, I'd only need this one (here and on another site) to be smaller. Thank you!

Ah, sorry, the password is Hypnose2021

Site URL: https://sprout-dragonfly-f48x.squarespace.com/ Hi there, I'm implementing an image in my website that I need only at 25 % of its size. On the desktop version I just implemented some empty space next to it to resize the whole thing. However, on mobile the image appears full screen. I resized it via CSS to max-width of 25 % but it's either possible for all images (than it works fine but all other images are just as small) or I target only the specific image with data-image-id but that's not working. It resizes the image but the whole container stays the size of the full size image and therefore creates too much space underneath the now smaller image. I've used this CSS code: @media screen and (max-width: 640px) { [data-image-id="60e8168657d2352c927ec54d"] { max-width: 25%; max-height: 25%; } } In the attachment I show you a screenshot of what it looks like now on the website. I also attach an image of what I want it to look like (if I address all images it works perfectly but not when I try to address only the one). Thank you for your help! Sarah