Pascal Amaliri• 70
@PascalAmah
Submitted
Josh Rodriguez
@drjrodriguez
All comments
- Josh Rodriguez• 30
@drjrodriguez
Posted
It looks like your 110 px padding is interfering with the centering, at least visually. I see the problem when you turn off the padding. And probably your monitor is very wide, so you may not have seen how it can offset your card to the right.
When dealing with the sizing and alignment, I made both the gray background a flex box, as well as the card itself. Then I set size of the gray background box to some % of the screen size, but justified its content to the center. Then within the card, I did the same.
Also, I noticed that when you make the screen width smaller, the card got very narrow and stretched out the text as it wrapped more closely. I think you need a min-width to prevent that.
Marked as helpful
1 @emersonocorrea
Submitted
Josh Rodriguez• 30@drjrodriguez
Posted
It looks like you missed the font family. At the very least, you could have used a sans-serif font. The style page lists a specific font from Google. From that URL, you can generate the link code to put in the header of your HTML to access that specific font. I wouldn't know how to do that in React. There is probably an option to import the font as part of your build process.
1
