A QR Code Component using HTML, CSS and Flexbox

Community feedback

• 

  Bright Adigwe•190

  @Femi-Bright

  Posted almost 3 years ago

  Hi Wesley, Lucas has already given a comprehensive explanation on max-width/min-width. Let me just add this.

  img {width: 500px;} You are telling the browser that "Hey! come rain, come sunshine, I always want this image to always be 500px even if the viewport width is 320px IDC"

  img {max-width: 500px;} You are telling the browser that "Hey! if there's enough space to make this image 500px fine! else feel free to scale it down as the viewport decreases. I just want it to have a maximum width of 500px"

  img {min-width: 500px;} You are telling the browser that "This should be the minimum width for this image at any viewport but feel free to scale it up if need arises"

  Nice, attempt btw

  21

  Marked as helpful
• 

  Kyle•50

  @CaptainKaveman

  Posted almost 3 years ago

  Hey Wesley,

  You've already got great answers about image widths, I would like to just add a helpful resource for creating websites that are responsive. Check out Kevin Powell, he has a free course called Creating Responsive Layouts and he goes into detail on explaining how to have various elements resize themselves depending on the view port size. I typically will have all images set to max-width: 100% by default. This will shrink the images that are to large and overflow to fit the container they are in. I also like to use a percentage for the width and then I will set a pixel value for my max-width. That way on large screens it won't stretch too much.

  12

  Marked as helpful
• 

  Lucas 👾•104,200

  @correlucas

  Posted almost 3 years ago

  Hello Wesley! Welcome to Frontemd Mentor community and congratulations for your first challenge!

  Answering your question about width and max-width. Max-width/min-width has to do with responsiveness because isn't a fixed value property, for example a container with width 600px is fixed, doesn't get bigger or smaller, but the same container with max-width: 600px can stretch when the page width gets under 600px.

  So these properties are a good fit if your purposes is something flexible.

  I hope this make more clear this idea about max-width and width differences.

  Congratulations bro!

  11

  Marked as helpful