Hazem Hussein• 120
@HazemHussein14
Submitted
I had a problem with the main paragraph. I couldn't make it three lines as in the challenge
JJ Fuentes
@jjfuentes13
All comments
- JJ Fuentes• 140
@jjfuentes13
Posted
Hi Hazem Hussein, I was reviewing your code, and it seems, at least on my end, that removing the gap: 3.2rem property should convert the paragraph into three lines. The gap seems to create an empty space between your section and image, thus wrapping your paragraph.
Afterward, you can play around with padding and letter spacing to get the paragraph to fit in a format that resembles the design.
Marked as helpful
0 - eldoragon• 40
@eldoragon
Submitted
I have a question
- how can i add top on bottom padding on mobile version? it seems the padding only work in right and left the body
Any feedback inside or outside of my question are very welcome, i want to learn more, thanks in advice
JJ Fuentes• 140@jjfuentes13
Posted
Hi eldoragon, as for your question, have you tried using margins? The way I achieved mine was to use the following:
margin: 74px auto;
This gave me space above and below the card while providing auto margin to center the card when the website has to be responsive.
1 - Benjamin• 70
@BenMK94
Submitted
i tried like 5 ways to make the image purple. I give up. 😅
JJ Fuentes• 140@jjfuentes13
Posted
Hi Benjamin, try using the property background-blend-mode,
https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode.
https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
I used soft light for the value, and it was the closest I got to be satisfied with a replication of the purple hue of the image. I wanted to make the darks darker without making the whole image dark, as you will probably see when using hard light value. I would think there are additional tips and best practices to improve color saturation, but at least using background-blend-mode achieved getting the image purple to specifications.
Marked as helpful
1 @R-Lemos-prog
Submitted
-
How to be even more accurate in measuring the dimensions of the boxes when you have a model to follow?
-
I also noticed a difference in the font of the design and my solution, I don't know the origin... maybe the browser (Brave)?
JJ Fuentes• 140@jjfuentes13
Posted
Hi, to me, the view looks very accurate to the design. Something to keep in mind is not to pixel-chase perfection. Check this article out, https://www.joshwcomeau.com/css/pixel-perfection/
Marked as helpful
1-
- Jesus• 20
@jesuswrivas
Submitted
I found issues with the way flexbox behaves while expanding or shrinking the explorer. Whats the best way to address this issue? I'd really appreciate any source to read you can recommend.
JJ Fuentes• 140@jjfuentes13
Posted
I also had issues with flexbox and eventually learned grid and used that. The only one I used flex was for the price div. Using a grid did eliminate the shrinking and expanding depending on the resolution size.
Marked as helpful
0
