Skip to content
Submitted almost 3 years ago

responsive without grid-item

Saeed0920•70
@saeed0920
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Anosha Ahmed•9,300
    @anoshaahmedPosted almost 3 years ago

    To get rid of the accessibility/HTML issues shown in your Report, wrap everything in your body in <main> ... OR use semantic tags ... OR give role="" to the direct children of your <body> ... Click here to read more

    Read your Report for more information.

    Great job! :)

    Marked as helpful
    1
    Saeed0920•70
    @saeed0920Posted almost 3 years ago

    @anoshaahmed thanks for the comment , I will definitely use it in the future👍

    1
  • Akshay•810
    @akshaywebsterPosted almost 3 years ago

    Hi, Saeed.

    Nice work with the project.

    A couple of things I noticed:

    • You're using a lot of media queries, and while that's a great thing, you can make your CSS more concise by grouping multiple styles for the same screen size in just one media query.

    For example, you've used two media queries in your code like so:

    @media only screen and (max-width: 375px) {
  html {
    font-size: 50%;
  }
}

@media only screen and (max-width: 375px) {
  .container {
    width: 90%;
  }
}

    You can just remove the redundancy by putting the style for both html & .container in just one media query:

    @media only screen and (max-width: 375px) {
  html {
    font-size: 50%;
  }
  .container {
    width: 90%;
  }
}
    • Sometimes in your HTML, you're using certain elements with class names like <h1 class="h1">Order Summary</h1> and <p class="p">. You'd be better off without using classes if you don't want any special styles for some of your elements, or you can make your class names a bit descriptive for better code readability.

    I hope my feedback is helpful to you. Have a great day! :)

    Marked as helpful
    1
    Saeed0920•70
    @saeed0920Posted almost 3 years ago

    @akshaywebster Glad you saw my codes And thank you for your comment, which was very helpful 👌

    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