jessclark98

Its worked!!! Thanks so much for all your help 🙂

Hi Dan, Thank you that does solve the cropping, I was looking to use code that would let me replace the image when viewed on mobile, so I could use an image like below. I previously did this for banner images and this is the code I used: media only screen and (max-width: 640px){ #page .page-section:nth-child(1) .section-background img { opacity:0 } #page .page-section:nth-child(1) .section-background { background-image: url(https://static1.squarespace.com/static/607fd834cc2b3d1c6038d54a/t/608175fa695dc47c58640bb7/1619097084730/studysuite+mobile+banner+ai.png); background-size: cover; background-position: center; background-repeat: no-repeat; } }

Site URL: https://www.jessclarkdesign.com/new-page On my site I have images for each project linking to their separate pages, does anyone have any code that would allow me to replace the image when viewed on mobile to a more suitable sized one, like how you can for banner images please?