All solutions

What challenges did you encounter, and how did you overcome them?

I faced challenges getting everything aligned but adding display flex to the body fixed it. I'm still struggling to fully understand the parent-child relationship and how they affect each other but slowly improving it.

What specific areas of your project would you like help with?

In the following image you can see what the webpage looks like when viewed from my friends iPhone 14 on Safari iOS. This is not what it looks like on PC nor what it looks like on a samsung Galaxy S10, nor on an iPhone 13. Any help to fix this would be appreciated.

https://imgur.com/a/MqzFr0i

Image below is what it looks like on most other devices.

https://imgur.com/a/x8AiW7G

What challenges did you encounter, and how did you overcome them?

There is an issue with overflow where the change anchor tag escapes it's flex container on my friends iPhone 14 using safari but I'm unable to replicate the issue with any dev tools or other browsers and do not have my own iPhone to test with. On a variety of different android devices using chrome this issue does not exist and it only exists in Firefox when the width is reduced below 280px.

What specific areas of your project would you like help with?

If anyone can help look over my flex containers and items and give me feedback if I've implemented and used them correctly or if there is a better and more efficient way I could have used them please give me critique here so I can improve my skills using flex.

What are you most proud of, and what would you do differently next time?

This is my first from scratch project without any tutorials or guides helping me along the way. I'm happy with my use of CSS variables and a span element which I used as a utility class to bold some text in multiple places on the page.

In the future I would like to use locally stored fonts instead of importing google fonts with a link.

I would also like to have a better naming convention as I'm not sure if the way I've named my classes and variables is standard practise.

What challenges did you encounter, and how did you overcome them?

I faced challenges using tables as I had never used or studied them in depth before, and had to do a lot of googling throughout the project to figure out how to space it and write the markup for it.

I had an issue where my tag in .hero class was overlapping with itself when it wrapped and I figured out it was due to the line-height which I had to adjust so that would not happen if the text did wrap to the next line.

What specific areas of your project would you like help with?

I faced issues, and did not solve how to create a border-bottom under each table row in my table. The project JPEG showed a line between each row in the table in the Nutrition section.