A QR Code Component using HTML, CSS and Flexbox

Community feedback

• 

  Bright Adigwe•190

  @Femi-BrightPosted over 2 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

  Marked as helpful

  2

  ---

  

  Wesley•330

  @wesleyjacobyPosted over 2 years ago

  @Femi-Bright Hi Bright,

  This is so incredibly helpful - Thank you so much.

  I experimented with setting min and max widths on the container and resized the browser and see exactly what you guys mean now.

  This platform is great! :)

  2
• 

  Kyle•50

  @CaptainKavemanPosted over 2 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.

  Marked as helpful

  1

  ---

  

  Bright Adigwe•190

  @Femi-BrightPosted over 2 years ago

  @CaptainKaveman I also love Kelvin Powell, He does an amazing job.

  1

  

  Wesley•330

  @wesleyjacobyPosted over 2 years ago

  @CaptainKaveman Hi Kyle,

  I've watched a few of his videos and they're fantastic, but I haven't seen the one you mentioned. I'll definitely take a look at it!

  I see there are a few more challenges similar to this one with an image, so I'll give those a go and hopefully they'll be far easier now thanks to all your guys help and advice.

  Thanks so much!

  0
• 

  Lucas 👾•104,400

  @correlucasPosted over 2 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!

  Marked as helpful

  1

  ---

  

  Wesley•330

  @wesleyjacobyPosted over 2 years ago

  @correlucas Hi Lucas,

  Legend! This sentence made the penny finally drop:

  ..but the same container with max-width: 600px can stretch when the page width gets under 600px.

  So I would assume max-width and min-width would almost always be used instead of width in real-world projects?

  Thanks so much for the help - I really appreciate it! :)

  0