Skip to content
OverviewSolutions
10
Comments
4
P
Alonso Vazquez
@alonsovzqz

All comments

  • Alonso Vazquez•170
    @alonsovzqzPosted 3 months ago

    Awesome work!! Just a couple of comments on your solution. Take a look at the background color vs color of the solution. In order to make your solution take the whole height of the page you can use height: 100vh in the body.

    A couple of changes in the font-family and the color in the "Ingredients", "Nutrition" and all those titles will make it look better and according to the design.

    Nice use of ul and ol when needed 😎 and if you add a border-radius to the card which contains the recipe will make a great change ;)

    You're on the right path. Keep coding! 😃

    Marked as helpful
    0
  • Alonso Vazquez•170
    @alonsovzqzPosted 3 months ago

    Awesome job on your solution! Maybe just a little bit more of spacing could help to make the content doesn't feel too tight. Like adding a gap between the links and some padding on the card itself. Also just to notice that there's no border-radius on the card. There are just a few improvements to make but you're doing it good. Keep coding! 😃

    0
  • Emanuele Fabrizio•220
    @efabrizio75Submitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    The biggest challenge was finding an acceptable compromise in the use of viewport width values.

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

    I would like to know other ways to achieve font scaling without using clamp() function or media queries.

    Blog preview card component

    1
    Alonso Vazquez•170
    @alonsovzqzPosted 3 months ago

    TIL that there's actually another way to scale fonts without using clamp or media queries, so thanks so much for making me research about it.

    Here's what I found, an article on CSS Tricks: Viewport sized Typography and practically they teach us that we can make use of viewport units for the font-size property. But I encourage to read it and see if that's something like you were looking for.

    Great job on your solution and asking those interesting questions. Hope might help.

    Marked as helpful
    0
  • edpau•440
    @edpauSubmitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    Flexbox- gap vs Margin

    Problem:

    • I tried to match the card height in the Figma file, I started with with margin-bottom: 24px on the image to create the gap between image and the text box.
    • Noticed extra vertical space added when using margin-bottom, even though the developer tools showed a 24px margin.

    Solution:

    • Replaced gap: 24px in the .card flex container with margin-bottom: 24px on the image.

    Please advise any better and easy way to match the Figma design card height.

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

    I tried to match the design of the card description, I want the last line of text to show "the next level" instead of "next level" , just like the Figma design, so I put a width 256px in the p tag, it forces the "the" to go to the last line.

    Please advise is there any better way to achieve the same result. Thx

    Responsive QR code component

    1
    Alonso Vazquez•170
    @alonsovzqzPosted 3 months ago

    I think the solution is good, but the only thing missing is just a small padding to your card__text class. So the solution to achieve that would be something like this:

    .card__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 0 16px; /* you can also use padding-inline */
}
...
.card__description {
  /* more code */
  width: 256px; /* remove this line*/
}

    And that should do the trick. Hope this helps.

    1