Responsive recipe page

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

This time I wanted to experiment with components, a feature of React to help build on my basics of the JS library.

I also wanted to experiment working in desktop first styling format. This was a little time consuming given the changes to the image in each screen size.

Hopefully, I will refactor using either a new framework or plain HTML and CSS.

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

The main challenge was the responsiveness from desktop to mobile.

Usually, I work from a mobile first then progress but wanted to challenge myself in the reverse.

The challenge was the responsive functionality of the image element. As it was contained, it renders with a slight border rather than taking up the width of the viewport.

A solution was to make the image position: absolute and then push down the remaining elements with a percentage padding-top for the next element.

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

If there is a better solution to making the image element take the full width of the viewport for small screens without forcing the other elements up and behind the image.