Skip to content
OverviewSolutions
9
Comments
32

LiBee

@Li-Bee370 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • LiBee•370
    @Li-BeePosted about 3 years ago

    Well done on the design also looks good on the mobile version 👏. I have a few comments for you consideration which I have listed below:

    1. Remove the width that you have applied to the star icons they automatically scale at the moment the icons look stretched

    2. You need to add the background images to meet the design I could not see them - but it looks good as is too

    3. To clear the accessibility point change the <section class=reviews> to a <div> element instead. You require at least one heading within <section>

    Marked as helpful
    0
  • LiBee•370
    @Li-BeePosted about 3 years ago

    Good job! To fix the accessibilty issues you need to add a landmark. If you add <main></main> around you code this should solve the issue for you. Link to more information if you want it. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

    0
  • LiBee•370
    @Li-BeePosted about 3 years ago

    Good job on the challenge - well done! 👏 A have a few comments for your consideration - i have listed below for ease :

    1. The card is not quite in the center consider using flexbox to center the card component:
    body {
 display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  }

    1. The titles Sedans, Suvs and Luxury need to capitalised in the design so: text-transform: uppercase;

    2. Compared to the design you need to smooth corners of the card component do add a border radius

    3. Compared to the design the background is not white (#fff) need to add shade to the background.

    4. To fix your accessibility issues add <main></main> around your code.

    Marked as helpful
    1
  • LiBee•370
    @Li-BeePosted about 3 years ago

    Hi similar to what @Kamasah-Dickson said it is better to start from mobile first as when you expand from mobile to desktop the adjustments you need to make is less in comparison to doing them the other way round.

    What I did on this challenge was to start with mobile first and I put the card in an article wrapper <div> and did a <width> of 87.2% and <margin> of 0 and auto. So when the viewport is for example 375px the card width is 327px and there is space between the card and end of viewport.

    Link to my challenge: https://www.frontendmentor.io/solutions/order-summary-component-using-mobile-first-approach-and-css-grid-c-HmAvKIr

    I am not saying it is perfect as I am still and learner and still learning about mobile first design but it may help 😁

    Marked as helpful
    1
  • LiBee•370
    @Li-BeePosted about 3 years ago

    Well done on the design. I think you need to add sr-only class to you <h1> element. As the title Profile Card Component is showing on the screen.

    1
  • LiBee•370
    @Li-BeePosted about 3 years ago

    Also I did max-width on the testimonials at desktop view - is this the correct thing to do?

    0
View more comments