Div with fixed width How to make responsive ?
Hello,
On the CLR course I learned that a fixed with with px is never good.
But now I want to try to make this challenge : https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H
and it looks to me that the card has a fixed width on both mobile and desktop.
Is it good for this case to use a fixed width in px or can still beter use % and then a width and a max-width ?
Frontend Mentor
Frontend Mentor | QR code component coding challenge
A perfect first challenge if you're new to HTML and CSS. The card layout doesn't shift, so it's ideal if you haven't learned about building responsive layouts yet.
6 Replies
you can just give it a max-width (no width or percentages needed).
oke, will try that and hope it is still responsive
a block element (p.e <div>) is already 100% by default, so it forms automatically to the available space
I mean with very small devices but as I said I will try it
Thanks for the hint
to me it looks like the intrinsic size of the image . You can use the min(100%, 50ch) forexample to save yourself a property declaration. The min() functio s takes thes
smaller of two values
so its like setting a width : 100%, max-width: 300px. Alternatively, max(100%, 300px) takes the larger of two values just fyi. In this case its always gonna be smaller than the mobile screen size so you can just set a max-width like Mark said
Also thanks
A lot of experimenting to get things right