zels3 Posted July 19, 2019 Posted July 19, 2019 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/
tuanphan Posted July 19, 2019 Posted July 19, 2019 Can you take screenshot for the section you say? I do not see... 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!)
zels3 Posted July 19, 2019 Author Posted July 19, 2019 @tuanphan I attached an image. When I use that css this is the result that I get. I'm trying to have it be on the image only, but goes around the inline text also. This occurs on every page that has an inline image block. This screenshot is taken from this page. https://chriszyu.com/clp
tuanphan Posted July 19, 2019 Posted July 19, 2019 @zels3 Try .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic img { border: 1px solid #eeecec; padding: 5px; overflow: visible; } 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!)
zels3 Posted July 20, 2019 Author Posted July 20, 2019 @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.
zels3 Posted July 20, 2019 Author Posted July 20, 2019 @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 .
tuanphan Posted July 20, 2019 Posted July 20, 2019 @zels3 I guess the problem was there, even if you didn't insert that code Look right, left and width .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic .image-block-wrapper img { width: 100% !important; left: 0 !important; } 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!)
Recommended Posts
Archived
This topic is now archived and is closed to further replies.