QR Code project with CSS Flexbox

Community feedback

• 

  Mayen•440

  @Mayen007Posted 4 months ago

  Hey @ShadowCoder040! Your project turned out great, especially for your first small project—awesome work! 🎉

  That said, there’s an opportunity to improve responsiveness for smaller screens. I noticed your container width is set to 340px, which means it won’t adjust properly for screens narrower than that. A more flexible approach would be to combine a default width with a max-width defined as a percentage of the parent container. This allows your design to adapt more smoothly to varying screen sizes.

  Here’s an example you could try:

  .container {
    width: 90%; /* Default width relative to the viewport or parent */
    max-width: 340px; /* Prevents the container from growing too large */
    margin: 0 auto; /* Centers the container */
  }
  

  This technique ensures the container fits smaller screens while maintaining a consistent maximum size for larger displays.

  By implementing these tweaks, your layout will look great on a wider range of devices. Keep up the amazing work, ShadowCoder! 🚀

  Marked as helpful

  0