Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
15
Comments
4
Code-S1
@Code-S1

All comments

  • CJuno23•50
    @CJuno23
    Submitted 10 months ago

    Result summary component main

    2
    Code-S1•210
    @Code-S1
    Posted 10 months ago

    check out this article https://fedmentor.dev/posts/font-size-px/ to see the right sizing units and your width is too low on the .result you just need to increase it and just give padding on the .radius

  • Sainadh7731•40
    @Sainadh7731
    Submitted 10 months ago

    result card

    1
    Code-S1•210
    @Code-S1
    Posted 10 months ago

    its not responsive, and you havent even tried to make it as a responsive page,also there is no box shadow

  • Nico•660
    @yeldynov
    Submitted 10 months ago

    Bento Grid made in Tailwind CSS

    1
    Code-S1•210
    @Code-S1
    Posted 10 months ago

    You should add one more break point for the middle screens (ipads) as it is not responsive on middle sccreens

  • justine1607•140
    @justine1607
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I was amaze by using the css grid, especially the grid-template-area, in where you will just directly add the item without specifying grid column or row anymore, it less code and makes it clean. next time I should do separate the css of the body from the components.

    What challenges did you encounter, and how did you overcome them?

    the challenges that I encountered, was in the row part of the grid because whenever i add max-height to the 2 cards in the middle there is this empty space that is so annoying, and what i did was I add some grid-template-rows and define its row so i wont get this empty whitespace at the bottom of my 2 middle cards anymore, but I'm open for suggestion of the pro's on how to handle like this situation because for me, on what I just did I think I just add some bandage to that problem that it's really not the solution for that.

    What specific areas of your project would you like help with?

    the specific areas that i would like help is on the grid-column that has an empty space.

    bento css grid responsive

    1
    Code-S1•210
    @Code-S1
    Posted 10 months ago

    Overusing <div> tags, known as "divitis," leads to cluttered code, poor semantics, and reduced performance. Instead, use appropriate semantic elements (like <header>, <section>, etc.) to improve readability, accessibility, and SEO. Keep HTML clean and minimal to ensure maintainability, scalability, and better CSS structure.

    Marked as helpful

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub