All comments

• 

  Theo-Larsimont• 10

  @Theo-Larsimont

  Submitted 12 months ago

  • I don't know how to add the shadowed edge for the summary part
  • I don't know if I'm using the best technique for html(class, id, spann, ...) identification. I think it's not the clearest but I don't see how to do better
  • Don't I have too much css code for a small page like that?

  

  Solution based to use correctly flexbox and grid

  1

  30

  

  Dominika Wojewska• 110

  @WitchDevelops

  Posted 12 months ago

  • RE shadowed edge: You can do it using either:
    • filter: drop-shadow([horizontal-offset] [vertical-offset] [blur] [color]); https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow
    • box-shadow: [horizontal-offset] [vertical-offset] [blur] [spread] [color]) https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow box shadow let's you combine several box shadow effects. Other than that it seems they work similarly.
  • Your HTML markup looks good to me, clear and readible enough
  • nah... it's all good! but you can refactor it a bit, for instance you're using the same padding in several classes, you can thing of adding a utility class for that

  well done!

  Marked as helpful

  1

  This comment has received 3 repliesShow
• 

  Sindy857• 110

  @Sindy857

  Submitted 12 months ago

  A great beginner project that is actually pretty easy. Unfortunately, the responsive behavior is causing me extreme problems and I still don't really understand how best to implement this. I would be grateful for any help on this topic.

  

  Responsive QR code component with HTML und CSS

  1

  70

  

  Dominika Wojewska• 110

  @WitchDevelops

  Posted 12 months ago

  I think you did pretty well on the responsive side!

  However, best practice is to use rem or em for responsive font size (instead of the vw that you used; vw and vh are good units for sizing containers). RE responsive font sizes, you may look into calc() and/or clamp(), both are quite useful for fluid typography. For instance, this calculator is really good - generates CSS code for given font sizes https://clamp.font-size.app/ Using this saves you some media queries code.

  You don't need to use flex on individual components (h2), you can try to set display: flex on the main card body to have better control of the layout. Make it flex-direction: column, center it, and you can use gap to define distances between elements.

  Also it's not good practice to skip heading levels, your h2 should be h1. But it's not a big mistake, rather adhering to best practices and guidelines.

  Overall, I checked your code on Chrome, several screen sizes, and it looks good on all :) well done!

  1

  This comment has received 1 replyShow