Offset image color block is distorted on mobile.

Site URL: https://power-moves-template.squarespace.com/

Hi there,

I created an offset color block behind an image that looks great on desktop but it's distorted on mobile.

I had to create zero padding around the image for it to work properly on desktop as well which I also wasn't expecting would be necessary. 

This is the code I used:

/* add offset border around image on home page */

#block-66c587f6c414c7cc6834 {box-shadow: -20px -20px #834a20; padding: 0px 0px 0px 0px;}

The password to get into the site is "demo."

Thanks!

Jennifer 

3 hours ago, JenniferAlice said:

Site URL: https://power-moves-template.squarespace.com/

Hi there,

I created an offset color block behind an image that looks great on desktop but it's distorted on mobile.

I had to create zero padding around the image for it to work properly on desktop as well which I also wasn't expecting would be necessary. 

This is the code I used:

/* add offset border around image on home page */

#block-66c587f6c414c7cc6834 {box-shadow: -20px -20px #834a20; padding: 0px 0px 0px 0px;}

The password to get into the site is "demo."

Thanks!

Jennifer 

I checked that it looks fine at the moment. Do you still need help?

Thank you for checking this!

There's space at the top between the image and the color block. I'd like it to look like the desktop version:

Thanks so much for your help!

Hi there, still looking for an answer on this if possible.

Thank you!

On 4/20/2022 at 5:19 PM, JenniferAlice said:

Hi there, still looking for an answer on this if possible.

Thank you!

Edit your code to this

#block-66c587f6c414c7cc6834 {
    box-shadow: -20px -20px #834a20;
    padding: 0px 0px 0px 0px;
    padding-top: 0px !important;
}

tuanphan, you are a genius...thank you!