QR-code-component

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Yiwen, well done here! 😊 I'm glad to hear that you're happy with how this turned out because I also think you did a great job.

  In terms of suggestions, one thing I suggest you try is to make this responsive, because right now, when I resize the browser and make it smaller, the card's size cannot be changed in relation to the browser width. In other words, the width is fixed. To make this responsive, you just need to change the fixed width properties; this means not using pixels for the fixed height in your image and changing the width to max-width in your card. Here's a simple way to fix all this:

  main  {
     padding: 1rem;
     margin: 1rem;
     max-width: 300px;
     // rest of your code
  }
  
  img {
    width: 100%;
    // remove height and margin-top
  }
  

  One other suggestion I have is that instead of having your main element as the card, have that as the container instead, and then use a div (or article, if this could be a standalone post/component) for your card. I think what you did here is OK; it's just usually good to structure components and elements where you separate the two for more complex projects like landing pages.

  Hope some of this can help out, and happy coding!

  Marked as helpful

  1

  ---

  

  Yiwen Chen•190

  @CHEN-YiWenPosted about 2 years ago

  @elaineleung Thank you so much for the comment! I will change my codes based on your suggestions! 😊 The <code>max-width</code> is such a quick way to make the card responsive. I have a little question about it: Instead of having <code>max-width</code> with a fixed pixel, can I use a percentage for it, such as <code>max-width: 90%</code>?

  1

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @CHEN-YiWen Yes, you can definitely try to do that! Actually what I normally do is, I use width: min() which allows me to include a percentage width and also another width. I normally use width in rem, but you can very well use pixels too.

  You can try something like width: min(90%, 400px), which means the browser needs to choose the smaller of these two widths at any point. For example if the browser with is at 375px, the browser would choose width: 90% since 90% of 375px is still smaller than 400px. If the browser width is at 500px, the browser would choose 400px, since that is smaller than 90% of 500px. What I normally do is, for the container width here I might write width: min(100% - 2rem, 20rem), where 100% - 2rem is the full 100% of the container minus 1 rem of margin around both sides of the container, totaling 2rem. I definitely recommend playing around more with min() as it is so useful and I use it in every project for my containers.

  Hope this helps you out, and feel free to ask more questions if I'm not clear enough!

  Marked as helpful

  0

  

  Yiwen Chen•190

  @CHEN-YiWenPosted about 2 years ago

  @elaineleung Thank you again for the explanation. It is really clear! I will definitely play around with it more😄

  0