Skip to content
OverviewSolutions
5
Comments
5
P
Babyjenx
@Babyjenx

All comments

  • P
    Babyjenx•90
    @Babyjenx

    Nice work! This is pretty close, although the media queries don't seem to be having any effect.

    There is a small gap at the bottom of the image. This can be fixed by using:

    .card-image { display: flex; }

    To get the card-image and card-content evenly taking up half of the card try:

    .card-image { width: 50%; }

    and

    card-content { width: 50% }

    The first media query you have is empty: @media (max-width: 23.44em) and (min-width: 90em) { }

    It also won't work because 23.44em (375px) and 90em (1440px) never overlap. I'd suggest removing it.

    Try replacing your media query with this:

    @media only screen and (max-width: 600px) {

    .card { display: flex; flex-direction: column; }

    .card-image { width: 100%; }

    .card-content { width: 100%; } }"

    Lastly, "Gabrielle Essence Eau De Parfum" and "149.99" should be using, font-family: Fraunces;

    Marked as helpful
  • P
    Babyjenx•90
    @Babyjenx

    Nice work, and great use of media query! Layout looks really solid as well and the breakpoint is clean. Some of the colors look a little off. The background is more of a grey than light brown and all the <p> text is brown instead of black.

    I think the bottom Nutrition table would be better structured as a table in the code for better semantics and maintainability. i.e. If you add more nutrition values later a table is simpler and avoids repetitive divs.

  • Gusta Mnds•40
    @GustaMnds
    What are you most proud of, and what would you do differently next time?

    Nada a dizer

    What challenges did you encounter, and how did you overcome them?

    Nenhum desta vez

    What specific areas of your project would you like help with?

    Ainda na responsividade

    Em usar os botões e hover para o mause

    2
    P
    Babyjenx•90
    @Babyjenx

    Nice work! Your code looks very clean and concise, and your website is almost an exact match. My only minor comment would be your top and bottom margins of the link card are just a little bit smaller than the example. Other than that excellent job!

  • P
    Sven Notermans•200
    @Sven-27
    What are you most proud of, and what would you do differently next time?

    It was already more easy to work with figma. I now understand how it is made. It was nice to learn how to make the fonts responsive with clamp instead of media queries.

    What challenges did you encounter, and how did you overcome them?

    No big challenge yet.

    What specific areas of your project would you like help with?

    Just all feedback is welcome. Improving is what it is about.

    Html css

    2
    P
    Babyjenx•90
    @Babyjenx

    This looks damn near perfect! It's good you worked with Figma on this, it takes the guessing game out of the design which is super helpful. I like the responsiveness of the design, the "Challenge By Frontend Mentor..." copy floats around nicely when I scale my browser window. Code looks clean and easy to follow. Nice work!

  • P
    Babyjenx•90
    @Babyjenx

    Layout looks really good! QR code stays centered and at a fixed size when window is adjusted smaller/bigger. Code looks really clean to me. Size of QR card could be reduced by 25%. Copy line breaks could be better matched.

    Marked as helpful