Skip to content
OverviewSolutions
29
Comments
7
Sameer Singh
@SameerJS6

All comments

  • Sameer Singh•560
    @SameerJS6

    Congratulations on completing this fun, beautiful Project.

    • You've done a phenomenal job on styling but there's a slight mistake that you've done, they are:-
    • On mobile, the result i.e the purple gradient container should take the full width, but you have given alot of padding or margin.
    • Also on the Accessibility report, don't use the same name for I'd on span.
    • Try to add a alt=Whatever the image is about on img tag is necessary because, In case if the user doesn't have a good internet connectivity, then it show this text instead of the image. So describe it short and simple.
  • Sameer Singh•560
    @SameerJS6

    Congratulations on completing this little fun challenge and you have done a great job.

    • But, you have to focus on the Accessibility report & HTML validation report, as it helps in using the clean and standard practices for writing code.

    Good Luck!!!

  • Sameer Singh•560
    @SameerJS6

    The problem your facing is very basic that anyone can face, but to solve it all you have to do is use the modern solution to align content i.e. css display: grid or css display: flex. But the nonetheless, below is the solution for your problem

    Here is the solution,

    • To center the content in the whole
    body {
 display: grid;
 min-height: 100vh;
 place-content: center;
}
    • Don't hide the h1 title
    h1 {
 color: black;
 text-align: center;
 visibility: visible;
}
    • For the Main Section set the max-width here
    main {
 padding: 1rem;
 max-width: 900px;
 margin-inline: auto;
}
    • Remove all the styling that you did in the cards section, and add this one mentioned below:-
    .cards {
 display: grid;
}
    • For making the 3 columns layout on desktop
    @media (min-width: 768px) {
.cards {
 grid-template-columns: repeat(3, 1fr)
}

    Then adjust the column's border-radius according to the layout i.e. either for mobile or desktop

    • Hope it helps you to understand the problem and let me know if this solved your problem
    Marked as helpful
  • Sameer Singh•560
    @SameerJS6

    "Nice one, buddy, but you forgot to add hover effects on the link tags (Creators Name, Price) and on the main image. You also forgot to add a cursor: pointer to some links. Always make sure to decrease the heading tag only by one. For example, if you have used h1, you should not use h4 directly on the page; it should only decrease one by one."

    Thank You,

    Marked as helpful
  • Sameer Singh•560
    @SameerJS6

    Nice one there brother, and also congratulations on your achievement in completing this project.

    But work on the Reset Button functionality, it reset the tip percentage active class but doesn't actually remove the selected value, so make sure to leave the active or selected class active.

    And also the give the body a min-height: 100vh; to center the whole application center proper. Thank you!!

  • Sameer Singh•560
    @SameerJS6

    I loved the color scheme and Gradient in it.!!.. But a minor change (i.e its 1000GB or 1TB, not 100GB)...

    Marked as helpful
  • Sameer Singh•560
    @SameerJS6

    Well nice one brother, must have felt good but you missed the color of Thank You (It's white, not black)