Newsmag: Framing of images in Image Box blocks – error?

Hi – See this page https://piracymonitor.org/partners/akamai

The main area of this page contains three rows of 300x300px images, placed in Image Box blocks. Each row has 3 images across. The top row has a blank in the 3rd position, intentionally. Now… the edges of the images are cropped, so that each image does not display from edge-to-edge (on all four sides of each image).

See this screen shot

When I look at the settings for Image Box block, the CSS tab establishes margins, padding and borders for the entire Image Box block – but not for the individual images placed within the Image Box block. Am I missing an Image Box setting, or is there custom CSS?

One work-around is to edit the images to increase the dark content at the edges. This situation happens with other pages also, but in this case, my client is not willing to edit the images.

What do you suggest?

Thank you.
– Steve

• This topic was modified 5 years by steve@tvstrategies.com.

Hi Calin, Thanks for the reply during the holiday week! Based on your reply, I think you looked at the wrong page.

Please check the rows of image boxes on this page – https://piracymonitor.org/partners/akamai/

And notice the image clipping, as in this screen shot
https://imgbb.com/tpSPFC5

And there is one additional issue – notice the alignment of the text that is placed below each of these images. I intended the text to be centered under the image, but it is not exactly centered. I experimented with the font settings for the image box but it didn’t make any difference. See screen shot – https://ibb.co/Wk516K6 – which also shows the settings that I am using.

Thanks
– Steve

Hi – Thanks for your suggestions. I still need help with your first one. The second one is resolved. The third one is resolved, but not in the way that you suggested.

1) You suggested to change the images to 300×250 (from 300×300) -> https://i.imgur.com/PaHY1Y2.png

See my screen shot: https://ibb.co/6nJQ4pq

As you suggested, I changed the image on the right to be 300 x 250 (the other two, i did not change). This did not help. Also, there is no control for the padding or borders around the individual images in the image block, using tagDiv Composer. Unless I did not understand what you suggested!

2) For the sidebar image alignment, you mentioned the different width and margins that were set on the element https://i.imgur.com/rG2xch9.png I removed them as you suggested, and it’s great – thanks

3) For my Text Alignment problem, I pasted your custom CSS into the Theme Panel > Custom Code > Custom CSS. It did not work. But, when I pasted it into Live CSS, it worked perfectly.

.td_block_image_box.td-image-box-style-2 .entry-title a {
padding: 0px;
}

Thanks for the great technical support!