NO BUG: Alignment issue with images inside of box

Bugs
1

Browser: Chrome 110
OS: Windows
URL: Link to a page that illustrates this issue

When in mobile resolution, tiles I created are not being aligned to the center-- I applied the settings on most of the elements but not applying as intended.

image
image1485×1242 103 KB

Also I noticed that when I apply link to images and then add rounded borders to the image, picture link breaks out of the rounded border.

See right side of the screenshot-- this is how I got around making a bordered picture box. is there a better way to handle this to create little “tiles” that also links?

[Please describe this bug in as much detail as possible so we can replicate & debug this bug]

2

Hi Luke,
The images are not centered because of the margin left and right, which is never a good idea in a flexbox layout:

CleanShot 2024-02-01 at 09.02.38@2x
CleanShot 2024-02-01 at 09.02.38@2x1600×2392 244 KB

If you want the image to be a bit smaller, use width: calc(100% - 20px) instead and they will stay centered.

Please set the overflow of the image to hidden.

Best regards,
timmse

3

Amazing worked like a charm, thank you!