I’m using Flex Block 1 starting with one of the Pre-made Style Preset. Under the Element’s CSS tab I colored the Background red for clarity. You can see on the top and left of the image the Background is perfectly aligned, but below the image there is a 5px space:
I have no Margin/Border/Padding set. I tried every option I could find to try to remove the space but I was not successful. I verified that this behavior is part of the Block alone and not something caused by a Column or Row setting.
Hi,
Some times this problem is from featured image that is not crop to the right size. But as a solution for this request you can set a margin bottom with “-5” -> https://i.imgur.com/FMVg6Ro.png
Let me know the results!
Thank you!
I tried using all of the Margin/Border/Padding options and could not remove the space. No matter what I set the Bottom Margin to (negative or positive number), the space doesn’t move at all, even if I set the number very large.
To make things clear I’ve set some colors for Flex Block 1:
Purple: CSS > Border
Yellow: Layout > Border Color
Green: Style > Module Background
Red: CSS > Background Color
As you can see, it’s the Red portion which is spilling out.
You may be right that this is an image issue; when I remove the image you can see that the Red area goes away.
How can I troubleshoot the crop of the photo? Our photos are uploaded at 16:9, but even when I set Flex Block 1 > General > Pre-Made Style Presets > Image Format > 16:9 the 5px red area is still present.
Hi,
Please make sure that the thumb has the right size, please use our guide for regenerate the thumb -> https://forum.tagdiv.com/thumbnails-fix-strange-looking-images-on-blocks/ and provide me a link where I can inspect the situation, only in this way I can see what is the problem and how to remove that extra margin.
Thank you for your understanding!
I uploaded a new picture and regenerated all thumbnails for that specific photo, but I’m still seeing the 5px space when the image is enabled in that block. Here is the page (see the test post with the colored borders as described earlier in this thread):
Hi, is look that this problem is made by a line height that is set by default on body -> https://i.imgur.com/CLRl5CY.png this can be fixed by setting a Line height on body -> https://i.imgur.com/gbVPDde.png or using a custom css -> https://i.imgur.com/qdPnRLn.jpg
.td_flex_block_1 .td_block_inner.td-mc1-wrap{
line-height: 0px;
}
This code need to be set in theme panel> custom code> custom css.
Thank you for your understanding!
Thanks Calin, that worked!
I have an issue relating to the same module. I’ve set a border with a radius (red) and a background color. How can I get the background to be contained within the edge of the border? You can see here how the corners are sticking out:
Here is the page itself (this is a different page from last time): https://alpha.roadtovr.com/?page_id=91129
Apologies, this is the correct test page: https://alpha.roadtovr.com/front-page-concepting-gn-fit/
Hello !
You will have to remove the RADIUS of that border. Unfortunately this is the only option at the moment.
Thank you !
Between the Style options and CSS there’s no way I can have rounded background corners?
Hi,
Is look that you must add some custom css too if you have set a background color -> https://i.imgur.com/03S18Kg.jpg
.td_flex_block_1 .td-element-style, .td_flex_block_1 .td-module-container {
border-radius: 20px!important;
}
This code need to be set in theme panel> custom code> custom css. The code will apply for all flex blocks 1.
Hope this will help you!
Thanks.
Thanks Calin. I gave the block an ‘Extra Class’ name and then used the Live CSS Editor right in the TagDiv editor to apply the code like this:
.Post-container .td-module-container {
border-radius: 20px;
background-color: #fffbf4;
}
Any reason not to do it this way?
Hi,
If you want to add this only on some flex blocks 1 then yes, this is the right implementation, you can use it without problems.
Thank you!
