NO BUG: Testimonial images are often cut off

Bugs
1

Browser: Edge Version 120.0.2210.77
OS: Windows 11
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

msedge_8hjNtVz7NE

I often have an issue with the images for testimonials. They are being cut off, even when tools show they have enough room.

2

image
image474Ă—667 35.7 KB

They do have space. I dont know if its just an issue with developer tools, but it only seems to affect testimonial images. From my own phone it looks okay for now

3

Hi,
Thanks so much for your report!

Unfortunately, I cannot reproduce the issue. Would you be so kind as to provide an accessible live link?

Best regards,
timmse

4

Its on test1.toldevar.dk
Password 123321

Doesnt look like i can send it in a message, so i will probably delete the link in a day or two

5

I think the problem arises primarily because the testimonial is in a simply defined css grid, which means that the calculation of the width and height of the testimonials does not work correctly (since it refers to the wrapper, which in this case is 1fr or auto). Apparently swiper js cannot handle this.

However, if you adjust your grid minimally, it should work. Instead of 1fr 1fr 1fr you should use repeat(3, minmax(0, 1fr)), and instead of 1fr on the mobile breakpoint minmax(0, 1fr).

6

Thank you, i will try to do that.

But if that is how the testimonials work, doesnt that mean they are flawed by design? Should your suggestion not be the default behaviour then?

7

I think you have misunderstood me. I’m talking about the grid you created that holds the testimonials, which can lead to such “side effects” (not only with the testimonials element, but in general), which is why you should use the minmax-method to prevent the overflow :slight_smile:

image
image2814Ă—352 99.1 KB

8

I created the grid as a workaround to get them to stack on mobile.

Here i try with the default testimonial block, and it can still happen

image
image2210Ă—1251 322 KB

Though i cannot rule out if its a developer tools bug, because when it happens, its usually while in those.

9

I have now tested it with the grid solution you suggested, as well as just using flexbox. It keeps happening, and it is not only when developer tools are open.

I have to use these workarounds to get testimonials to stack instead of being forced to have them only swipe-able horizontally.

10

Please share a live link showing both methods :v: