Skip to content
OverviewSolutions
5
Comments
2
CamronWithrow
@CamronWithrow

All comments

  • Sam-52•20
    @Sam-52Submitted over 1 year ago

    This is my first solotion and first project. I do not know if this is the best way to fix this problem. I think location of the paragraph text below is not good enough. Any feedback is welcome.

    Desktop Solotion for QR Code Challenge

    2
    CamronWithrow•120
    @CamronWithrowPosted over 1 year ago

    Hi!

    I have a couple of comments that may help you out with your code.

    • The title for the card should be in an <h1> tag instead of an <h2>. Generally, you want to have a sequence of headings starting with <h1> and without skipping any headings below (so, you don't want something like <h1> followed by <h3>, or an <h2> without an <h1> above it). You can use CSS to style your <h1> so it looks like the design.
    • You also want to avoid using <br> to match the line breaks in the design. You can get the lines to break in the same place using the font size and the width of the card (your <div class="image">).
    • You can get the card centered in the browser viewport by making your <body> a flex container. In your main.css, you could add
    body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

    Then you wouldn't need to manually position the card.

    I hope this helps!

    Marked as helpful
    1
  • CamronWithrow•120
    @CamronWithrowPosted over 1 year ago

    Hi!

    I used flexbox as well for this challenge. To get the red "unread-notification" icon, I used ::after to style an icon after the notification message.

    Using your classes, I think it would look something like this:

    .unread .notiftext::after { content: ""; height: 0.25rem; width: 0.25rem; background-color: red; border-radius: 50%; }

    Marked as helpful
    0