I am proud of creating a nice looking and responsive design for all screen sizes. After finishing the mobile design and then the desktop design, I noticed the sizes between mobile and desktop looked really awkward, so I made my own tablet design to account for those sizes and I think it turned out well. I do think it could be improved on next time and my code could be optimized, but I did spend some time organizing and structuring it so that not too many areas were repeated. This was a great project to practice CSS grid and I hope to explore more features about grid in future projects.
What challenges did you encounter, and how did you overcome them?I had some issues figuring out Grid and having it do what I wanted to, but using Chrome dev tools really helped and by just playing around with it, I was able to figure it out. I also notice that I spend way too much time obsessing over making the design look pixel perfect from these images and my code ends up having unnecessary spaces in each card and .5rem font-size changes just so the text lines up exactly like the images. In the end, I deleted all that just so the code is cleaner and accepted that without knowing the exact measurements of everything from the design, it's not worth the effort of guessing and checking and creating the perfect design.
What specific areas of your project would you like help with?I came across this issue when creating the tablet view for this project. I don't think it's very noticeable unless there's a device with a really weird dimension, but I would like to understand what's happening.
For the desktop view, I have:
body { height: 100vh; }
because I wanted the content to be vertically centered. However, for mobile, I didn't need this and everything is scrollable and works great. Once I started making a tablet version, I noticed that at longer device heights, the content wouldn't be vertically centered, so I added the body height of 100vh, so it would be. But now, when I decrease the height, it cuts my content off at the top and isn't scrollable all the way anymore. Why does it do that? When I change the screen height, shouldn't the vh change to match and the content remain visible and scrollable? How would I be able to keep things vertically aligned at larger device heights but scrollable and visible at smaller ones?
Thank you to anyone who can help and I hope that explanation made sense.
