Skip to content
OverviewSolutions
14
Comments
9

Thiago Santos

@thiago-hdsBrazil295 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Thiago Santos•295
    @thiago-hds

    Hi! Nice work so far!

    1- You can do it by setting the background-color and border-radius on the parent div. It would be something like:

    .work {
  background-color: hsl(15, 100%, 70%);
  border-radius: .83rem;
}

    2- The person card is bigger because all the other cards have width: 90%. I'm not sure why you need to do it.

    Here are some other suggestions:

    • You can set a max-width to the cards in the mobile layout so that they don't stretch all the way across
    • The card icons are only decorative so you can use background-image.
    • There is a lot of duplication in your script. You can try to come up with one function that receives the selected time period as argument and updates the UI. You can create an object to hold all the data and use it in your function.

    Hope this is helpful!

    Marked as helpful
  • Thiago Santos•295
    @thiago-hds

    Oi Luiz! Nesse caso uma possível solução é transformar cada section em um flex container com display: flex e flex-direction: column e alinhar as divs que contém os botões com margin-top: auto. Espero que ajude!

    Marked as helpful
  • Thiago Santos•295
    @thiago-hds

    Hi! Nice work!

    I noticed some problems on Firefox because you used width: -webkit-fill-available. I think if you replace it with width: 100% it will be fixed.

    You could also vertically center the card.

    Otherwise it looks great!

    Marked as helpful
  • Thiago Santos•295
    @thiago-hds

    Thank you for the feedback! I made the changes you suggested.

    I usually avoid using !important but I learned recently that utility classes can be a good use case for it. However I don't think there is need for it on this small project, so I removed them.

    Ionicons is one of the icon libraries suggested on the challenge style guide.

    Thanks again! :)

  • Thiago Santos•295
    @thiago-hds

    Hi Anne! You have to provide a link to a working version of you project so we can see it. If you need help for that, check this post out: https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248

  • Thiago Santos•295
    @thiago-hds

    Hi Yashika! Your solution looks great to me!

    Just a couple suggestions:

    • you can just set overflow:hidden on the container. No need to give a border-radius to the image also
    • try to fix the accessibility and HTML issues reported

    Nice work!

    Marked as helpful
View more comments