Skip to content
Submitted about 2 years ago

Html and Css using bootstrap

Unzila Maqsood•60
@Unzila02
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

After 1 week of hard working i am capable of using grid system and using bootstrap i design this challenge. feel free to comment on my code if you feel this code is better then comment me.

Community feedback

  • romila•3,570
    @romila2003Posted about 2 years ago

    Hi Unzila,

    Congratulations for 🎉 for completing this challenge. I can tell that you put a lot of effort into this. The cards are responsive, and it is great that they are responsive. There are some issues I want to address:

    1. It is best practice to wrap the main content within the main tag which would ensure that your content is wrapped within the correct landmarks e.g. <main class="container"></main>
    2. The code is missing the <!DOCTYPE html> tag at the top.
    3. To center the card in the middle for desktop, you can use the flex property for the body e.g.
    body (min-width: 700px) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  flex-direction: column;
}

    Also, I've noticed that you took a desktop-first approach. I would strongly suggest you taking the mobile-first approach as it will be easier for responsiveness and rearranging/changing the elements within the page therefore instead of using the max-width for your media query, you can use the min-width instead.

    Overall, great attempt and wish you the best for your future projects so keep coding 👍.

    Marked as helpful
    0
    Unzila Maqsood•60
    @Unzila02Posted about 2 years ago

    @romila2003 thank I update and also adopt the suggestions.

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord