Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
zels3

Brine border on inline image block

Question

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/

Edited by zels3
Initial Revision

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0

Can you take screenshot for the section you say? I do not see...


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 0

@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

examplescreenie.png.e673a0539df7f1bfbcf5d1064a8bc1e7.png

Share this post


Link to post
  • 0

@zels3 Try


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



Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

@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


Send me a message if you have any questions (free 10 minutes).

4000+ free code: Adirondack - Avenue - Brine - Bedford - and more (all 7.0 template & 7.1)

Useful guide: How to share url (trial plan) - 2 languages site - 3 languages

Plugins: Product Enquiry Form - Product Color/Image Swatch VariantLightbox Anything

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...