Cannot get my background image to stop being cropped on all pages, tried multiple codes - Squarespace version 7.1

Site URL: http://www.crackedpaintstudios.com

Hi everyone! I deleted every code I've tried and decided to start fresh.

Can someone help me stop my banner from being cropped? I used the same pixel size as was recommended, I tried what Squarespace recommended with the duplicated sections and their code. I used other codes with the appropriate section ids. It didn't work at all. Any help would be appreciated. Thank you!

Hi. On all devices or mobile only?

@tuanphan Thank you so much for responding. It works on landscape mode on a tablet, but if it's profile, then it cuts the banner off on tablets, too. It's the banner both on the home page and on the Projects page. 

On 3/8/2021 at 10:54 PM, crackedpaintstudios said:

@tuanphan Thank you so much for responding. It works on landscape mode on a tablet, but if it's profile, then it cuts the banner off on tablets, too. It's the banner both on the home page and on the Projects page. 

Hi. Sorry for the delay. First remove these code

 img {
  border: 2px solid black;
  }
@media screen and (max-width:780px) {
[data-section-id="60327f25c0c23b2ccbc2d6ac"] .section-background img {
    width: 100% !important;
	height: 52% !important ;
}

add this code to DESIGN > CUSTOM CSS

/* resize tablet - mobile banner */
@media screen and (max-width:991px) {
body.homepage article section:first-child {
    min-height: 30vh !important;
}
}
@media screen and (max-width:767px) {
body.homepage article section:first-child {
    margin-top: 10vh;
}
}

@tuanphan Thank you so much! That absolutely worked!! 

Is there a way to do the same thing with my Project and Shop pages? I tried just putting in the same code, but it does not have the same effect, even when I remove other code. Thank you so so much for your help!

20 hours ago, crackedpaintstudios said:

@tuanphan Thank you so much! That absolutely worked!! 

Is there a way to do the same thing with my Project and Shop pages? I tried just putting in the same code, but it does not have the same effect, even when I remove other code. Thank you so so much for your help!

You mean this image?

and this?

@tuanphan

Yes, that image that is both on the Projects page and the Shop page. 

17 hours ago, crackedpaintstudios said:

@tuanphan

Yes, that image that is both on the Projects page and the Shop page. 

Hi. Too long. You mean resize banner image on mobile?

https://www.crackedpaintstudios.com/

https://www.crackedpaintstudios.com/projects