Skip to content
OverviewSolutions
14
Comments
9
Thiago Santos
@thiago-hds

All comments

  • Chinmay Agarwal•235
    @chinmayagarwal3007Submitted almost 3 years ago

    Hello 👋!

    Some problems I am facing are-:

    1. I am unable do that border thing in each card where the half of the card is given a border radius and the upper half colour is is below that border curve.🙄

    2. In the mobile interface, the person name card is bigger than the rest of the cards. How to fix that??🤔

    Please help me solve these problems(or any any other if you find it 😬)

    All the help is sincerely appreciated😊

    Time tracking dashboard main Solution(By HTML, CSS, JS)

    1
    Thiago Santos•295
    @thiago-hdsPosted almost 3 years ago

    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
    2
  • Thiago Santos•295
    @thiago-hdsPosted almost 3 years ago

    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
    1
  • Thiago Santos•295
    @thiago-hdsPosted almost 3 years ago

    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
    1
  • Thiago Santos•295
    @thiago-hdsPosted about 3 years ago

    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! :)

    1
  • Anne•10
    @anneclaessenSubmitted about 3 years ago

    I wasn't able to move the 'change' anchor element to the left. I would love to receive feedback on why that is and how I can fix the issue.

    Order Summary Component Using CSS Flexbox

    1
    Thiago Santos•295
    @thiago-hdsPosted about 3 years ago

    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

    0
  • Thiago Santos•295
    @thiago-hdsPosted about 3 years ago

    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
    1
  • Thiago Santos•295
    @thiago-hdsPosted about 3 years ago

    HI! It looks really great!

    Just two small things:

    • The "Calculator" and "Karma" cards are in different positions that they are on the design.
    • You could use the em unit for breakpoints to make the layout more flexible in case the user changes the browser default font size.

    Keep it up!

    Marked as helpful
    1
  • Erel Ropeta•385
    @ereljapcoSubmitted about 3 years ago

    This is my first javascript challenge, so I really need a lot of feedbacks >w<

    Sometimes matchMedia() works responsively, sometimes it doesn't. Any idea how I can make it consistently working? Would appreciate your help :)

    HTML, CSS and JS

    1
    Thiago Santos•295
    @thiago-hdsPosted about 3 years ago

    Hi erelita! Great solution! It looks really close to the design.

    About the Javascript: it's not a good idea to add click handlers every time you hit the breakpoint. That way you might end up adding multiple handlers to the button that do the same thing and it's bad for performance.

    You could remove the previous handler before adding a new one but I think a better solution is to use JavaScript only to toggle the class that controls the visibility of the tooltip when the button is clicked. Let the CSS/media queries control how it should look. That way you also don't need to repeat it on the HTML markup.

    Hope this is helpful! 🙂

    Marked as helpful
    1
  • Kim•450
    @MismistySubmitted about 3 years ago

    This is my first submitted challenge, I would appreciate and feedback and suggestions of what areas you guys/gals think I need to improve on. I don't understand why the icons are not showing up. They show up when I run the live server on my laptop.

    Four Card Component Using Flexbox

    1
    Thiago Santos•295
    @thiago-hdsPosted about 3 years ago

    Nice work!

    • Your icons are not showing up because you didn't add them to your Github repository
    • Your cards are not horizontally aligned on mobile
    • You shouldn't set a fixed width on your flex-container because the layout is not responsive for viewport width lower than 1120px
    Marked as helpful
    0