Components FAQ

The wrapper of an image is slightly taller than the image itself.

This can be fixed by setting display: block on the image.

When making an image dynamic, it becomes distorted, but this didn’t happen when it was hardcoded.

This may be because when the image is made dynamic, the width and height are added dynamically. To prevent distortion, we should always override these values. Usually, this is done with width: 100% and height: auto, but there may be cases where the width is another percentage or a specific pixel value, and the height has a known value.

I’ve set the font-weight to 600, but it’s not working properly.

Make sure you’ve imported that weight with that font style on the website. Some fonts do not have all the weights.

How can I make all the cards in the same row the same height?

To make all the cards the same height, simply set display: flex on the parent container without specifying align-items. This approach can be used in a column layout, slider, or any other layout. When setting display: flex on the parent, be sure to add width: 100% to the card itself, as otherwise, it will adjust to the width of the content.

In iOS, form fields have a border-radius even though I haven’t set one

iOS applies a default border-radius. The only thing you need to do is set border-radius: 0.

When I try to fill out a form on iOS, it zooms in automatically.

In iOS, if the font-size of input fields is smaller than 16px, it automatically zooms in because it considers the text too small. To fix this, make sure the font-size of the input fields is set to 16px or more.

I’m using a backdrop-filter, but it doesn’t work on Safari and iOS.

To make it work properly in Safari and iOS, you need to add -webkit-backdrop-filter with the desired value. It’s recommended to add -webkit-backdrop-filter before backdrop-filter to ensure that backdrop-filter will override it in other browsers.