Jump to content

Offset image color block is distorted on mobile.

Recommended Posts

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 am a blogger who launched www.bikekitz.com in October 2018.

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

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?

image.png.e36a63b197df86644c866d676ab96ed6.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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:

image.png.4821242cd258b0176be40353cc11b244.png

Thanks so much for your help!

I am a blogger who launched www.bikekitz.com in October 2018.

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.