I'm pretty happy with how this turned out! But if you notice anything that could be improved, feel free to let me know!
Maybe I could write some parts of my code cleaner? 🤔️
The spacing of the cards looks weird on bigger, higher resolution desktops. Does anyone know how to make the cards stay together, like on the 1440 px wide desktop?
If anyone knows if there is a better way to horizontally center icon and text in the <button> element, please let me know!
I used display: flex; with align-items: center;. It works, but it feels unnecessary to change the display property to align the items?
My solution still differs a bit from the original design.
On mobile, unordered list items that span multiple columns should be vertically centered. But I haven't found a way to do that yet.
The "Nutrition" table seems to be made differently, too. I can't really remove the last bottom border and there's also a small gap between the table data borders.
If anyone has suggestions on how to fix these issues, I'd really appreciate the help!
Should the social links be in a <nav> element or is <div> fine/correct?
Do you think my code is easy to follow? Any suggestions for making it cleaner?
Setting some properties and values for responsiveness
What specific areas of your project would you like help with?Any area is acceptable and appreciated
Great job! Your solution looks really close to the original design, and the responsiveness works well across different screen sizes. 😊
Now this is personal preference, but I'd prefer to not be able to scroll on desktop. If you remove the height: 120vh; at line 31 and instead use margin or padding to center the cards, everything is on screen without needing to scroll.
This would make it look weird on mobile though, because of the larger margin-top at line 143 and 149. If you adjust those, it should look better on mobile.
Other than that, your solution looks really nice!
Hey there! On desktop, your solution looks good - awesome effort! :)
For mobile, I think it would help if you switch the layout sooner. Changing the Media Query to 600px, for example, would accommodate larger phones. Also, the text gets cut off. If you remove width: 100%; on line 150, it wraps more naturally.
Keep it up! 😊️
Hi there! I like the way you organized your code, it's very easy to read :)
I would play around a little with padding and margin, your solution looks a bit more compact than the original design. If you give the elements more breathing room it should look closer to the template.
Other than that, great job :D
This looks really good, nice job! The code is clean too. I would add a slim border around the card. But overall, this is really well done!
Wow, your solution looks really close to the original design – great job on that! 🎉
One small suggestion for the code: It might be easier to read (and more accessible) if you used more semantic HTML elements like <main> and <footer> instead of only <div>. This can help with structure and improve accessibility.
Also, grouping similar CSS rules together (for example, the two .attribution stylings) could make the stylesheet a bit more organized. Just a small detail, but it might help in larger projects! Keep up the great work. 😊
