Skip to content
OverviewSolutions
1
Comments
2
Josh Rodriguez
@drjrodriguez

All comments

  • Josh Rodriguez•30
    @drjrodriguezPosted over 1 year ago

    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
  • Josh Rodriguez•30
    @drjrodriguezPosted over 1 year ago

    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