Skip to content
OverviewSolutions
12
Comments
2
Brian Hammer
@BrianHammer

All comments

  • Joshua Olanrewaju Ikulayo•220
    @SaviourjrSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Proud been able to finish this up within a short period of time. Unlike my first which took days for me to finish up.

    What challenges did you encounter, and how did you overcome them?

    i wasn't able to make the avatar image inline with the text "Name". I'm open to any suggestions. Thank you

    What specific areas of your project would you like help with?

    The avatar and the txt "Name" are not inline.I'm having difficulty making it inline.

    Blog-preview-card

    3
    Brian Hammer•180
    @BrianHammerPosted 6 months ago

    Hi Joshua,

    Your code is a good start. One way you can center both the image and the text is to wrap the two elements in a flex box div, and set this div to make the items in the center.

    It appears you have the correct font for the title, but not for the paragraphs or the buttons. If you set the font of a parent element (the <body> or container), then all elements within it will have its font. This is an easy fix, as all you need to do is put font-family: "Figtree", sans-serif; that you have in the title style into .container {}.

    Another thing that can help your development experience is to make a separate CSS file. This will make your CSS look more readable, and easier for you to change in the future. If you are using Visual Studio Code to edit your files, there are extensions such as Prettify that will automatically format the tabs which will make your code more readable while saving you time.

    Hope this helps, and feel free to let me know if you have any questions.

    Marked as helpful
    1
  • SAGAR-Cdy•10
    @SAGAR-CdySubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    All feedback

    What challenges did you encounter, and how did you overcome them?

    maintaining the box model

    What specific areas of your project would you like help with?

    all

    QR code using CSS

    2
    Brian Hammer•180
    @BrianHammerPosted 6 months ago

    -The QR code does not center properly on my screen, and the gray border should only be added on large screens. I recommend removing the gray border, and add it last when everything else works -The text overflows from the card on my screen. This is because you have a fixed height set on the QR Card. Removing this will cause the height of the card to always fill all the elements inside -Add the 'text-align:center' style to your title like you did inside the <p> tag -The background colors do not match exactly. You can get the colors the designer used inside of the style-guide.md, and apply it to your design -The text color and font weight can be changed for the paragraph text. -A cool trick is that you can add draggable="false" inside your <img /> tag to prevent the user from dragging it EX: <img draggable="false" src="..." />

    Overall, removing the fixed height of your card element will be the biggest improvement.

    Marked as helpful
    0