Skip to content
OverviewSolutions
5
Comments
3
Krysia Sherburne
@kldupless

All comments

  • Scott•50
    @Scott-321Submitted almost 2 years ago

    Hi Guys,

    Any feedback on how I can improve my CSS would be much appreciated :)

    Thanks

    Scott

    profile-card-component-main

    1
    Krysia Sherburne•120
    @klduplessPosted almost 2 years ago

    Wow, this looks great!

    To match the challenge design better, I would make a few tweaks.

    It looks like you are missing the drop shadow on the profile card. It's very subtle in the original design so it can be hard to tell!

    .card {
....
box-shadow: [put offset, blur radius, and color here]
}

    I also think the border-radius on the card needs to be a little bit bigger to match the design.

    Lastly, replace the h1 on the name & age, and h2 on the followers, likes, and photos numbers with a span or p element for proper semantic HTML - heading tags should be used for denoting structure, rather than resizing text. More on that here.

    Marked as helpful
    1
  • Krysia Sherburne•120
    @klduplessPosted almost 2 years ago

    You should add alt text to the cart icon to fix the accessibility error. E.g.:

    <img src="/images/cart.svg" alt="cart">

    Instead of setting individual widths on every child element of .preview-card__right, you can set padding on the parent element to better match the design and make the price aligned to the left.

    .preview-card__right
{
   flex: 1 1 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
padding: 1em;
}

    Then remove width from ..preview-card__header, .preview-card__title, .preview-card__description, .preview-card__price, and .preview-card__buyButton

    Marked as helpful
    1
  • Samira•50
    @SamiraAliGaalSubmitted almost 2 years ago

    So I've tried my best, but the cart icon is off, it happened when I tried sizing it down, that it got cut off. Anyway this is my best result, tried to stay as close to the design as possible.

    Product Preview Card

    2
    Krysia Sherburne•120
    @klduplessPosted almost 2 years ago

    When you have an icon inline with text like that, you can either set a specific class for the image or use a child combinator to make the icon the same height as the text.

    E.g, this will target every image that's a child of a button element and make it the same height as the text:

    button > img {height: 1em}

    Or you can put the property on the image via a class: .button-icon {height: 1em}

    Marked as helpful
    0