Bricks Version: 1.4.0.2
Browser: Chrome 104.0
OS: Windows
URL: https://racingschoolreview.com/
I have a post loop stacked on top of a carousel, but there is a massive gap that isn’t in the canvas. When I shrink the canvas down to <100 pixels the issue is then fixed when I maximize the window again.
Canvas
Initial Load
After Shrink then Maximize
Hi Levi,
Thank you very much for your report!
I see that you are using Bricks 1.4.0.2. The current version is Bricks 1.5, and 1.5.1 is coming soon…
Can you reproduce the problem with Bricks 1.5 as well? Please use a staging site or a local installation for testing, or make a backup of your existing site before updating.
Edit: The issue is caused by the max-width of 70% on the posts element, which seems to influence the isotope calculation.
Best regards,
timmse
Hello timmse, thanks for your help.
I updated to 1.5 and am still having the issues.
Is there another way that you recommend me constrain the post so that the featured image doesn’t expand to the point where it becomes blurry or cropped. I was using a list but then problem is it doesn’t maintain the aspect ratio of the image. Am I just trying to fit a square peg into a round hold and there is a better way to do it overall?
I’m currently using a masonry layout on a query loop that only displays the most recent post. It was the most consistent option to not have the featured image get changed.
Thank you for your help as always,
Levi
Hi, like I said:
If you use width instead of max-width, the gap disappears. Unfortunately, we cannot influence the calculation of isotope.
Using custom CSS, you can add an aspect ratio to the image wrapper (root .image) and fit the img into it using object-fit: cover. The only important thing is that you choose a default image size that is closest to the largest view, so that the image is not scaled up.
Best regards,
timmse
