Skip to content
OverviewSolutions
16
Comments
235
Divine Obeten
@Deevyn9

All comments

  • Divine Obeten•2,415
    @Deevyn9

    Hi Ahmed, great solution you have here, it looks really great. However, you'll need to change the width for the media query to about 600px so it'll be more responsive.

    Happy Coding! 🎉

  • Divine Obeten•2,415
    @Deevyn9

    Hi Abelardo, congrats on completing this project, your solution looks really good, however, you'll need to use max-width instead of width to make the container more responsive for smaller screens, you'll also need to add paddings to the left and right of the body to give it a bit of space from the container when it goes below the specified max-width.

    I hope this is helpful to you.

    Happy Coding!🎉

  • Divine Obeten•2,415
    @Deevyn9

    Hi Dani, congrats on completing this project, your solution looks really good, however, you'll need to use max-width instead of width to make the container more responsive for smaller screens, you'll also need to add paddings to the left and right of the body to give it a bit of space from the container when it goes below the specified max-width.

    I hope this is helpful to you.

    Happy Coding!🎉

    Marked as helpful
  • Divine Obeten•2,415
    @Deevyn9

    Hi, congrats on completing this solution, Your solution really looks great and responsive. However, you'll need to add left and right padding to the body so there would be a bit of spacing between the container and the body when it goes below 320px. 10px of padding should be enough.

    Happy Coding!

    Marked as helpful
  • Divine Obeten•2,415
    @Deevyn9

    Hi, congrats on completing this project, your solution looks really great. However, I found a few issues that would need resolving:

    (i) You'll need to add background-repeat: no-repeat; to the body to prevent the gradient from repeating.

    (ii) You'll need to add a min-height: 100vh to the body and display: grid place-items: center; to center the container.

    I hope you find these helpful.

    Happy Coding! 🎉

  • Divine Obeten•2,415
    @Deevyn9

    Hi Brian, there's and issue with the github pages and the site isn't loading.

    Marked as helpful
  • Divine Obeten•2,415
    @Deevyn9

    Hi Bocikond, congrats on completing this solution, your solution looks really great, about the responsiveness, you did pretty good, However, you'll want to make the container take a column flex direction from 850px because that is the width where the image begins to shrink.

    I hope you find this helpful.

    Happy Coding! 🎉

    Marked as helpful
  • Divine Obeten•2,415
    @Deevyn9

    Hi John, congrats on completing this project, it looks really good. However, the container isn't responsive for screens below 340px, try changing the width to max-width and adding left and right padding to the body so it can look great on smaller screens> Also, you'll need to swap the hover and active colors on the radio buttons.

    I hope you find this helpful.

    Happy Coding! 🎉

    Marked as helpful
  • Divine Obeten•2,415
    @Deevyn9

    Hi Reymart, congrats on completing this project, your solution looks really great. However, on the mobile view, the container isn't centered, you can solve this using body {display: grid; place-items: center;}

    I hope you find this helpful.

    happy coding! 🎉

    Marked as helpful
  • Divine Obeten•2,415
    @Deevyn9

    Hi Yishak, congrats on completing this project, your solution looks really great, your innovations too are awesome. However, I found a little thing you'll need to fix, you'll need to adjust the "add to cart" function so it doesn't add an item if the number chosen is less than 1.

    I hope you find this helpful.

    Happy Coding! 🎉

    Marked as helpful
  • Divine Obeten•2,415
    @Deevyn9

    Hi Mikhael, congrats on completing this solution, your solution looks really great. You'll want to remove the scroll whenever you toggle the navbar on mobile, you can do this by adding an overflow of hidden on opening the navbar and removing the hidden overflow on closing the navbar.

    I hope you find this really helpful.

    Happy coding!

    Marked as helpful
  • Divine Obeten•2,415
    @Deevyn9

    Hi Vinzz, congrats on completing this project, it looks really great. I noticed you gave the main container a max-width of 60rem, which looks really great. However, when the width of the screen is reduced to 330px, it begins to overflow, you can add left and right paddings of around 10px to curb this issue on screens of smaller width.

    Hope you find this helpful.

    Happy Coding! 🎉

    Marked as helpful
  • Divine Obeten•2,415
    @Deevyn9

    Hi Aayush, congrats on completing this project, it looks really great. Although the card overflows on screens below 320px, I saw that you gave it a min-width and width of 320px, try making use of max-width instead and give the body some left and right padding so there's a bit of separation between the card and the body.

    Hope you find this helpful.

    Happy Coding! 🎉

    Marked as helpful
  • Divine Obeten•2,415
    @Deevyn9

    Hi Altacis, congrats on completing this project, it looks wonderful. However, here as some key takeaways you can work on to make it better:

    Firstly about the color, for the background you're to use hsl(210, 46%, 95%) instead of hsl(0, 0%, 81%)

    Also, the container isn't centralized on vertically, to make it centered, you should add display: grid; and place-items: center; to the body tag.

    I hope this comment helps you achieve what you want.

    Happy Coding! 🎉

    Marked as helpful
  • Divine Obeten•2,415
    @Deevyn9

    Hi Lukasz, congrats on completing this project, you did great to implement the design beautifully.

    However, the error message and image that appears when an invalid email is typed doesn't disappear when a valid email is typed. Look into solving this issue.

    Happy Coding!

    Marked as helpful
  • Divine Obeten•2,415
    @Deevyn9

    Hi Natnael, congrats on completing this project, your solution looks really great.

    About the issue you say you have with media queries, have a look at this documentation, It should make you understand media queries more. Good luck.

    https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    Happy Coding!

    Marked as helpful
  • Divine Obeten•2,415
    @Deevyn9

    Hi, congrats on completing this solution, it looks really neat. However, I found thing you can work on to make it better.

    Give the main container a max-width and give the body left and right padding so that when the screen's width is reduced, it wouldn't overflow to the sides.

    I hope you find this helpful and you are able to implement this.

    Happy Coding! 🎉

  • Divine Obeten•2,415
    @Deevyn9

    Hi Saravana, congrats on completing this project, your solution looks really great. Although I found the following issues:

    • The calculation for the Tip and Total amounts aren't accurate.
    • The Error messages don't clear out when the reset function is triggered.
    • The container isn't centered vertically, this can be fixed using body { display: grid; place-items: center; }
    • I also noticed that you didn't use the design for the mobile view and it makes it hard to use on small screens.

    If you have issues trying to fix these issues, you can use my solution

    I hope you find this helpful.

    Happy Coding! 🎉

    Marked as helpful