@vanzasetia
Posted
Hi, Honeypot! 👋
For better responsiveness, you need to:
- Keep the design simple: Stick with the original design. You do not need to add additional content.
- Use modern CSS: Use flexbox or grid to place the card in the center of the page. These modern techniques are more robust than absolute positioning and have less code to write.
- Static maximum width: Use
rem
unit for themax-width
of the card. Do not use percentage unit. Percentage value will make the card keeps growing. - Use the same styling: Use the same font size for all breakpoints or screen sizes. Convert
15px
to therem
value by dividing the pixel value by 16. - No width: You only need to specify the
max-width
of the card. You do not need to control the width of the card for other screen sizes. By specifying amax-width
, the card will grow up to the specified value while allowing it to shrink if ever needed. In short, the card is responsive with onlymax-width
.
I hope my feedback helps. Have fun coding! 😄
Marked as helpful