Qr Project Responsive.

Community feedback

• 

  Lucas Exequiel•200

  @arrejoriaPosted over 1 year ago

  Hey, good job on this solution! 💯 I can leave you some tips

  I identified a few areas where I think you can improve your design:

  1. [Resize]: I see you're having issues with responsive view responsiveness. The layout has an explicit unit that uses the minimum width or height of the viewport for different devices.

  2. [Image]: Your img tag element does not have an explicit width and height attribute.

  Here are some recommendations that i found useful to improve your design and skills:

  1. [Units]: Units like vmin and vmax are great but not always useful. I recommend using somewhat more explicit units and properties like vh, vw and max-height, max-width for width and height.

  2. [Elements]: Try not to use too many elements like </br> in inline elements to break lines. Explore further using margin or padding to get the result you want.

  Thanks for sharing and I hope some of the above was helpful to you! keep it up you are doing great! 🧉

  Lucas,

  0
• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, regarding your question,

  • In this challenge there is not much to do in terms of responsiveness because the card is exactly the same in both versions, 320px wide if I remember correctly.

  The 'problem' I see is that when using vmin, it is too small in the mobile version and too big on the desktop.

  If you want it to be similar to the original design, it would be better to use max-width with the corresponding measurement in pixels or rems for example.

  • But if you want to use vmin you could do it with the help of the clamp() function, setting a minimum and a maximum.

  For example, the width of the 'wrapper' could be something like this:

  width: clamp(15rem, 55vmin, 25rem);
  

  With the measures that seem best to you.

  I hope it’s useful : )

  Regards

  0