Skip to content
OverviewSolutions
29
Comments
13
P
Leonard
@leoikeh99

All comments

  • P
    Leonard•1,025
    @leoikeh99

    Good solution, i have a couple of feedbacks:

    • For the button it better to set only the padding for the top and bottom and then set a width of 100%, i.e.: padding:1rem 0;, this will help with overall responsiveness
    • For the right side where you have the h3 there are couple of ways to make sure the img and the plain text are properly vertically aligned, you could set the h3 to display: flex and align-items: center, this will help with the alignment
    Marked as helpful
  • P
    Leonard•1,025
    @leoikeh99

    Very nice solution i have two reeomendations

    1. In your Sidebar, in the list of documents i think its better to set the overflow to auto instead of scroll, this way the scrollbar only shows when it's actually needed.
    2. Maybe remove your console logs.

    P.S: I really like the responsiveness.

    Marked as helpful
  • P
    Leonard•1,025
    @leoikeh99

    Very good solution, my only feedback is:

    1. Try to already make the component responsive before reaching 425px, as it is right now the image seems to reduce in width a little too much before you applied your responsive styles.

    2. I would also advice, at a point when the screen is a small sizes to just set the components with to a certain percentage e.g. 90%, this will greatly improve responsiveness.

  • P
    Leonard•1,025
    @leoikeh99

    A nice attempt, i have a couple of corrections:

    1. You shouldn't set the card to a width of 50% rather to an actual value e.g. 600px

    2. As for flexbox i think you used it well but the image and the right part (the content), should both take 50% of the card you can do this by easily setting the width of both the image and the right part (the content) to 50%

    3. It will also be very helpful to set the content parts border-box to box-sizing i.e. box-sizing:border-box in your css

    lastly i'll leave a resource link to a youtube step by step solution to this problem: Product Card Component (Explained) - Frontend Mentor #1

    Marked as helpful
  • P
    Leonard•1,025
    @leoikeh99

    Good solution, but i have a few corrections:

    1. I think is just better to set the buttons width to 100%, since you have already set the width and padding for the container.

    2. I think will also be better to set the width of the container to something like 90% when the screen reduces to a certain width, this will enable better responsiveness.

    3. For the button, i don't think you should set the border-radius to 5%, rather is should be something like 8px.

    4. Lastly you should reduce the line height of you <h2> a bit.

    Marked as helpful
  • P
    Leonard•1,025
    @leoikeh99

    I would advice setting the height of the sidebar to 100vh and not 100%, so that users do not have to scroll down to see the bottom of the sidebar.

    Marked as helpful
  • P
    Leonard•1,025
    @leoikeh99

    Wooooowwwwwwww

  • P
    Leonard•1,025
    @leoikeh99

    Check out this solution: https://www.frontendmentor.io/solutions/product-feedback-app-nextjs-and-styled-components-BJgXK1hBB5

    if you still cant figure it out then maybe reach out

  • P
    Leonard•1,025
    @leoikeh99

    All i can says is this is really good, great job.

  • P
    Leonard•1,025
    @leoikeh99

    Good stuff

  • P
    Leonard•1,025
    @leoikeh99

    Great job

    Marked as helpful
  • P
    Leonard•1,025
    @leoikeh99

    very nice im also learning react need to ask did you deploy this with heroku or netlify?

  • P
    Leonard•1,025
    @leoikeh99

    Nice work, i guess one thing i'll add is that you should now learn css grid or flex box or both, they will make this a lot easier.