@matebeingSubmitted about 3 years ago
Latest solutions
URL shortening API landing page Using NextJS and Styled Components
#next#styled-componentsSubmitted almost 3 years ago
Latest comments
- @soumya495Posted about 3 years ago
Nice work here MATHEUS, I saw that you used a hardcoded width of 500px on the advice-container, instead of that for these types of design which involves a card, try to use a percentage value and then set a max width, this way on smaller screen sizes you won't have to worry about overflow and on bigger screen sizes the width won't expand beyond the max-width value. This is a very easy way to make responsive card designs. Hope it helps you, you can check out my implementation if you have some doubt.
Marked as helpful0 - @soumya495Submitted over 3 years ago@soumya495Posted over 3 years ago
Thank You Marta for bringing this to my attention, actually the problem was not with the logic but the digits of input were hiding under the element that I positioned absolutely in the input field to hide the arrow keys of number field, I was not aware of the fact that it could be done from CSS, so now I've changed the code and the issue seems to be fixed, If you can please do check out. Thank You again for the review .
0 - @zylcomSubmitted over 3 years ago@soumya495Posted over 3 years ago
Instead of using the img tag you could have used the background-image property of css and then use background-color and background-blend-mode to change the image color. Using the background-image property is also helpful when you want to switch between different images in different screen sizes. Good Work here !!
Marked as helpful1 - @alexiscenriquezSubmitted over 3 years ago@soumya495Posted over 3 years ago
You could have added a border-radius as shown in the design and center the main content, otherwise great job !!
1
