Hi
I would like to make my Big Grid Flex 1 rounded with a color background for meta info (title of the article), this is the code I put into the theme panel:
.td-big-grid-flex .td-thumb-css {
border-radius: 10px 10px 10px 10px;
}
It works, but not if I insert a color in the “Meta info background” section, and it is like this:
Can someone help me? Thanks in advice!
up
Hello viglioh,
You have this problem because in the General module overlay color is set => https://www.screencast.com/t/3BHaIax0HN, you need to clear it, and add the color for Meta Info Background, then you can insert this code for border-radius, will look like this => https://www.screencast.com/t/4OIPJSeDFwe3.
.td-big-grid-flex .td-module-meta-info {
border-radius: 0px 0px 10px 10px;
}
.td-big-grid-flex .td-thumb-css {
border-radius: 10px 10px 10px 10px;
}
Hope this helps you!
Thank you!
Hi, thanks for the answer, it worked well but I have another problem now, with the “Zoom effect on hover” activated, the zoomed image is square and not rounded, there’s something that can I do for this?
Image: https://imgur.com/3QEWgjf
Hello,
The border-radius is not applied when you zoom the block, because of this CSS => webkit-transform: scale3d(1.1, 1.1, 1).
When the zoom applies, the image size is increase.
You can try to insert this code, I’m not sure 100%, but look like this => https://www.screencast.com/t/lmuZYsChj,
.td-big-grid-flex .td-module-meta-info {
border-radius: 0px 0px 10px 10px;
}
.td-big-grid-flex .td-thumb-css {
border-radius: 10px 10px 10px 10px;
}
.td-module-container:hover .td-thumb-css {
border: 3px solid white!important;
-moz-border-radius: 10px!important;
-webkit-transform: scale3d(1.01, 1.01, 1)!important;
}Hope this will helps you!
Thank you!
