@Limpi23
Submitted
@alonsovzqz
@Limpi23
Submitted
@alonsovzqz
Posted
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
@Perry2004
Submitted
@alonsovzqz
Posted
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! 😃
@efabrizio75
Submitted
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.
@alonsovzqz
Posted
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
What challenges did you encounter, and how did you overcome them?
Flexbox- gap vs Margin
Problem:
margin-bottom: 24px
on the image to create the gap between image and the text box.margin-bottom
, even though the developer tools showed a 24px margin.Solution:
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
@alonsovzqz
Posted
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.