Design comparison
Solution retrospective
I'm proud that I was able to make it responsive. And finally getting to use the calc() function, makes me understand it better.
What challenges did you encounter, and how did you overcome them?I don't have much experience making a website responsive. I got to work with media queries and use the CSS calc() function to make my fonts responsive.
What specific areas of your project would you like help with?All feedback is welcomed!
Community feedback
- @jguleserianPosted 3 months ago
Greetings, Hector!
Congratulations on a job well done! I enjoyed seeing how you solved some of the same issues I had when doing this project. I enjoyed going through your solution and seeing your strategy.
I did have a couple of questions, however. These have to do with your use of
calc(). You wrote, for example:.content h1 { font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (1280 - 320))); font-weight: 800; }First, I wondered why you didn't go ahead and put the number
4instead of(24 - 20)since these would always come out to be the same and parentheses have precedence over operands. The same goes for(1280 - 320). The second question was where you got the number1280. I can see the relevance of the other numbers, but that one lost me.##Observations##
One observation I had was that your box shadow seemed larger than the model's. As I looked into your code, I saw this:
-webkit-box-shadow: 12px 12px 0px 0px rgba(0, 0, 0, 1); -moz-box-shadow: 12px 12px 0px 0px rgba(0, 0, 0, 1); box-shadow: 12px 12px 0px 0px rgba(0, 0, 0, 1);I think all you needed was the
box-shadow, and not the additional "webkit" and "moz" versions. Did you have a specific purpose in using those? If not, the redundancy may have thrown things off.Another thing I noticed was that the height of the mobile version (at 375px) was not the same as the model. As I looked closer, I could see that it was the size of the image that was the problem. The picture dimensions should be smaller, but the image should crop a little on the right and bottom. This has thrown off what would otherwise be a perfect alignment.
Finally, I noticed that to center your blog card, you made the
<body>a flex container. While this works, and solves the issue with how to center the peskyattributionelement at the end, it made your design just slightly on the Frontend Mentor comparison "solution vs. design." This is, of course, non-consequential and means nothing except that at superficial glance it looks like the proportions are off, which they are not. It's just that your design set a tad higher in the preview.Anyway, cudos to you, for creating such awesome proportions and spacing and the use of
calc(). I started to usecalc(), but was too lazy to think through all the math like you did. I usedclamp()instead. nevertheless, you really thought through this one and it looks great.I hope my comments are helpful. Take them or leave them. I am learning just like you.
Best regards and happy coding!
Jeff
Marked as helpful1 - @hectorlil48Posted 3 months ago
Thank you for the comment. When I was doing the project, I looked up how to make my font sizes more responsive and that's what I found. But from doing more projects I discovered that just using media queries to change the font will be easier and confusing. For the box shadow, I use this generator online and try to make it look as close as possible, they provide it with the -webkit and the -moz. I will look into my project's height but have begun using clamp and media queries to make my projects more responsive.
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord