Organizing responsiveness in layouts has been one of the challenges for me. How do you usually organize CSS for different devices and screen sizes?
Andrea
@poniscriptAll comments
- @AnjasfedoSubmitted about 1 year ago@poniscriptPosted about 1 year ago
I usually organize my mobile styles at the top, for a mobile-first workflow. After that, the tablet ones. And after that, at the bottom, the desktop ones!!
One thing: You mistyped the color of the card, is white not soft blue. It´s a small thing, your overall result is fine!!! <3
Hope you find this helpful!
Marked as helpful0 - @yagho05Submitted about 1 year ago@poniscriptPosted about 1 year ago
˗ˏˋ ´ˎ˗ Hi! I saw your challenge and I think you need a small tip! The overall result is pretty fine, but the circle is a little bit off! ˗ˏˋ ´ˎ˗
Instead of giving the circle a relative width and height, give it a fixed width and height : for example,
width: 50px; height:50px;
This will give your circle, a good structure and not an ellipse one.˗ˏˋ ´ˎ˗ Hope this is helpful for you! <3 ˗ˏˋ ´ˎ˗
Marked as helpful0 - @Edward-OlukotunSubmitted about 1 year ago@poniscriptPosted about 1 year ago
˗ˏˋ ´ˎ˗ Hii! I saw your project and even though it's fine, It seems uncompleted. ˗ˏˋ ´ˎ˗
I would give you some tips if you would like to hear!
- Try installing the Pixel Perfect Chrome Extension to compare with the given design. This will make you work further on having the most perfect page.
- Try checking out again your elements padding, placement and colors. Something's off. Check it with the given design.
- For a small project like this, I wouldn't recommend you to use React. But for practice, is good. If you did it for practice I can't say anything hahaha!
- More top and bottom paddings in the color cards results.
- Figure out how to place the main card on the center of the page.
And that's it! Hope it's useful for you, and good luck with your coding!
Marked as helpful0