hi,
i have a row width image element on the left and text element on the right.
when the text element gets higher than the image - i want that the image would fill the whole left side.
css: object fit cover.
that worked some times but with j5 and newest sppb pro i cant get the image as high as the text element.
tried width, height...100% but didnt work.
Hi
Thanks for contacting us and sorry for your issue. Could you please give me your site URL and also screenshot of your issue?
-Regards.
hi, yes some links in hidden content.
Could you please give me a screenshot of that portion?
you can see both links? so you have both css for the images. no need for screenshot.
in the first page i overwrite the divs around the image for 100% height. so if the text on the right side is higher than the image, the image would cover...that gap.
in the second link, i cant overwrite those classes to get the image 100% height.
css: object fit cover
Hi.
This cannot but work. You just didn't find the right approach. I doubt that JoomShaper support will help you, as this is beyond the support policy.
If you provide a public link, I could help you with this.
... Or maybe the best option is to use a background image in a column instead of Image addon. Then you do not need CSS
yes bg would be a way to do it, but without alt tag and seo... it worked in previous version of sppb. but now the divs changed and the row dont want to be 100% height.
you can check this one:
https://www.spath-schuetzen.de/
its the old version of sppb and height 100% for the image of image-textbox row.
you can check this one: https://www.spath-schuetzen.de/ its the old version of sppb and height 100% for the image of image-textbox row.
You have an overly complex design (row inside row) and not universal CSS.
Add a section. The row inside is not needed.
Add your own classes to the settings of the column containing the image and to the Image addon settings.
Column settings:
Image Addon settings:
CSS:
.image-col :is(.addon-root-image, .clearfix, .cover-image, .sppb-addon-content, .sppb-addon-single-image-container) {
height: 100%;
}
.cover-image .sppb-addon-single-image-container {
display: flex;
}
.cover-image .sppb-img-responsive {
object-fit: cover;
}Result
_
After that, you just need to add these classes in other blocks where you need it.
Thank you very much, i will try this code.