Jump to content

Brine border on inline image block

Recommended Posts

I managed to get a border around the image block for poster, but I can't figure out how to get the border only around the image for the inline-block.

Any thoughts from CSS wizards?


.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic {
  border: 1px solid #eeecec;
  padding: 0px;
 overflow: visible;
}

http://chriszyu.com/

Link to comment
  • Replies 6
  • Views 3.4k
  • Created
  • Last Reply

@tuanphan Thanks for the suggestion. I added the following code to see what was going on. and it looks like the left, right and bottom edges are being cropped off.


.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic img {
    border: 5px solid #000;
    padding: 0px;
   overflow: visible !important;
 }

See attached for what I mean. alt text

2019-07-20-09-47-50-window.png.e4caa1764d7bff691c691f40b9c40cb8.png

Link to comment

@tuanphan I checked what is actually going on with outline. It looks like there's another wrapper or container that is actually cropping the image. You can notice the sides come in less than the top and bottom.


 .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic img {
outline: 5px solid black;
 outline-offset: -50px;
    overflow: visible !important;
  }

Whatever that wrapper is, that's where the border for the image should go. Just not sure what it is or where to find it. See attached

alt text.

2019-07-20-10-00-46-window.png.4227a2c180611c769e968129a23da6d1.png

Link to comment

@zels3 I guess the problem was there, even if you didn't insert that code

Look right, left and widthalt text


.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic .image-block-wrapper img {
   width: 100% !important;
   left: 0 !important;
}

right.png.14c377be5b9052490500c936cc4d92fb.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.