Skip to content
OverviewSolutions
5
Comments
2
Dominika Wojewska
@WitchDevelops

All comments

  • Theo-Larsimont•10
    @Theo-LarsimontSubmitted about 1 year 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
    Dominika Wojewska•110
    @WitchDevelopsPosted about 1 year 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
  • Sindy857•110
    @Sindy857Submitted about 1 year 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
    Dominika Wojewska•110
    @WitchDevelopsPosted about 1 year 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