@jguleserian
Posted
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 4 instead 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 number 1280. 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 pesky attribution element 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 use calc(), but was too lazy to think through all the math like you did. I used clamp() 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 helpful
