https://github.com/Hamisoptimistic/FM-QRCode

Community feedback

• 

  Hamim•20

  @HamisoptimisticPosted 2 months ago

  Can you explain it to me how to set image dimensions in css.

  1. Do i have to hardcode their width/ height??
  2. if not then what are the other ways, or best practice to handle images.

  0
• 

  Aakash Verma•9,520

  @skyv26Posted 2 months ago

  Hi @Hamisoptimistic, 👋

  Here are a few suggestions to improve your project:

  1. Use ul and li tags:
     Wrapping the links with <ul> and <li> tags would make your content semantically correct and more accessible. It also ensures that your list of links is clearly defined for screen readers and other assistive technologies.
     Example:

     <ul>
       <li><a href="#" class="link" tabindex="0"><h3>GitHub</h3></a></li>
       <li><a href="#" class="link" tabindex="0"><h3>Frontend Mentor</h3></a></li>
       <li><a href="#" class="link" tabindex="0"><h3>LinkedIn</h3></a></li>
       <li><a href="#" class="link" tabindex="0"><h3>Twitter</h3></a></li>
       <li><a href="#" class="link" tabindex="0"><h3>Instagram</h3></a></li>
     </ul>
     

  2. Use max-width instead of fixed width:
     Instead of setting a fixed width, use max-width for better flexibility. This allows your container to scale according to different screen sizes. Also, avoid setting the height as it can create layout issues — let the content define the height for a more natural, fluid design. This way, your container will adapt to its content, and it improves responsiveness. 🌍 Example:

     .container {
         background-color: white;
         max-width: 300px;
         padding: 10px;
         display: flex;
         flex-direction: column;
         justify-content: space-evenly;
         align-items: center;
         text-align: center;
         gap: 5px;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }
     

  3. Use 100% width for images:
     For responsiveness, set your image width to 100%. This ensures it scales based on the parent container's width while maintaining the aspect ratio. Also, remove the height since the aspect ratio is already taken care of by the image. 🔄 Example:

     .qr-code img {
         width: 100%;
         border-radius: 10px;
         margin-top: 0;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }
     

  Hope this helps! Let me know if you need any further clarifications. 😊

  0