Any feedback or suggestions are greatly appreciated.
The GUI it self and the calculator.
What challenges did you encounter, and how did you overcome them?Litte problems with the calcualtor.
What specific areas of your project would you like help with?None :)
Well done!
Try centering the content on desktop. You don’t need to use margin in the .body class. Instead, add this to the body:
display: flex justify-content: center; align-items: center; height: 100svh;
Then, you can remove the margin from the .body class.
The idea is good, the semantic HTMl is good and code is well-structured but the layout doesn’t work well on different screen sizes.
Right now, it looks like the design was built for desktop first, and then adjusted for smaller screens. This approach makes it harder to maintain and fix responsiveness issues. A mobile-first approach could make things easier—starting with small screens and then progressively enhancing the layout for larger devices.
Not much
What challenges did you encounter, and how did you overcome them?I couldn't align the last section Nutrition to look like in figma
What specific areas of your project would you like help with?I couldn't align the last section Nutrition to look like in figma
Use grid instead of flex in the last section.
For .nutrition__item, set:
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
I'm in my learning phase. If you have any suggestions about my project, let me know in the feedback section.
What challenges did you encounter, and how did you overcome them?I learned to use fonts properly in this project
Remove the max-width: 50% and margin because, on small devices, the content is too squeezed. Instead, apply max-width: 50% from 768px onwards.
When you do this, add more padding to section one, for example, padding: 1.3rem. Do the same for the li items, but use slightly less padding. Then, repeat these adjustments for the Ingredients, Instructions, and Nutrition sections.
After that, use @media queries:
css Kopiuj Edytuj @media (min-width: 768px) { background-color: white; width: 50%; margin: 3em auto; } These changes will improve responsiveness.
