Latest solutions
Link Sharing App using NextJS13, Typescript and styled components
#next#styled-components#typescript#mongodbPSubmitted over 1 year agoDictionary web app (React + Styled Components)
#accessibility#react#styled-componentsPSubmitted almost 2 years agoKanban Management using NextJs13 + Prisma + Postgres + OpenAI
#next#postgresPSubmitted over 2 years ago
Latest comments
- @kelvtmoneyP@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 awidth
of100%
, 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 theimg
and the plain text are properly vertically aligned, you could set theh3
todisplay: flex
andalign-items: center
, this will help with the alignment
Marked as helpful - For the button it better to set only the
- @nablancoP@leoikeh99
Very nice solution i have two reeomendations
- In your Sidebar, in the list of documents i think its better to set the
overflow
toauto
instead ofscroll
, this way the scrollbar only shows when it's actually needed. - Maybe remove your console logs.
P.S: I really like the responsiveness.
Marked as helpful - In your Sidebar, in the list of documents i think its better to set the
- @abbas-roholaminP@leoikeh99
Very good solution, my only feedback is:
-
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.
-
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.
-
- @CodeSoftyP@leoikeh99
A nice attempt, i have a couple of corrections:
-
You shouldn't set the card to a width of 50% rather to an actual value e.g. 600px
-
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%
-
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 -
- @Eslam-EOP@leoikeh99
Good solution, but i have a few corrections:
-
I think is just better to set the buttons width to 100%, since you have already set the width and padding for the container.
-
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.
-
For the button, i don't think you should set the border-radius to 5%, rather is should be something like 8px.
-
Lastly you should reduce the line height of you <h2> a bit.
Marked as helpful -
- @jerry-devP@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