Jump to content

Image insets when applying CSS with block ID

Recommended Posts

Posted

Image insets from border when applying CSS to image with block ID with below CSS, but fits snugly when the same CSS is applied to the property selector .image-block-wrapper. See two uploaded images below for comparison. I only want to apply to select images, not universally. If I can resolve, I'll add more feature image block-IDs to the entry. Thank you!

#block-dd9a8d05f998d8510303 { 
	border: 1px solid hsla(45, 5%, 90%, 1.0);
	border-radius: 20px;
	box-shadow: 0px 0px 20px 5px hsla(45, 5%, 45%, 0.2);
}

Relevant web page

CSS to Block ID insets image:

Screenshot2024-03-18at15_20_29.thumb.png.4188e6c7313bd9474410522b24c575fc.png

CSS to property selector .image-block-wrapper fits image snugly:

Screenshot2024-03-18at15_22_47.thumb.png.16e1783f8b51c55e924242f239999a74.png

  • Replies 3
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Posted

Hi @tuanphan, thx for checking. Yes pls, snug-fitting is the target.

It snug-fits when I CSS a property selector for the entire site, but adds padding when I CSS block-ID (same CSS).

  • 3 weeks later...
Posted

Just checking in to see if anyone might have a solution to removing the padding when the image is CSSd as a Block ID, but fits correctly (snugly) when referred to as a property selector. Thx!

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.