Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions14Comments9

All comments

  • Chinmay Agarwal• 235

    @chinmayagarwal3007

    Submitted

    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-hds

    Posted

    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-hds

    Posted

    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-hds

    Posted

    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-hds

    Posted

    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

    @anneclaessen

    Submitted

    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-hds

    Posted

    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-hds

    Posted

    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-hds

    Posted

    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

    @erelropeta

    Submitted

    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-hds

    Posted

    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• 340

    @Mismisty

    Submitted

    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-hds

    Posted

    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