dynamic cards sizing issues
I have been working on a dynamic payment form similar to the one from frontendmentor but I am trying to do it with all CSS and no images or SVGs. I started with a mobile first approach and tackled desktop version through landscape media query which to me was good since it made it responsive for mobile devices on landscape mode. Main thing I’ve had trouble with is coming up with a way to size the dynamic card and it remain responsive and consistent across different screen sizes. Thank you for any recommendations you can give me on anything to help me improve! Here is the CodePen to it https://codepen.io/jq712/pen/poYjRVa
3 Replies
Sounds like @container queries could help!https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
MDN Web Docs
CSS container queries - CSS: Cascading Style Sheets | MDN
Container queries enable you to apply styles to an element based on the size of the element's container. If, for example, a container has less space available in the surrounding context, you can hide certain elements or use smaller fonts.
You may also want
aspect-ratio, you can use aspect-ratio: 1.585 for a bank card. With this you only need to specify a width or a height which makes it simpler to be responsive and look goodWow thanks I can’t thank you enough, even when I asked GPT if there was a way to define height and width with a single property I did not get a solid answer thank you so much:))