Responsive recipe page

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

I think I implemented the design pretty close to the specification (without using Figma). I forgot to add the line spacing in some of the lists and so I would change that next time.

Also, the image was sort of tricky to separately style in the mobile version, and so I would put it in a separate container in future versions.

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

The image was in the same container as the rest of the content. This was was useful as I wanted all of the content to have the same padding. It caused problems though when I tried to implement the mobile breakpoint; I wanted to remove the padding and the only way I could think of to do this was to use relative positioning and 'undo' the padding for that specific element. This seems somewhat hacky though and I think perhaps not including it in the same container might make this easier in future.

A takeaway might be to look at both designs (desktop and mobile) and see if anything will have to change and account for it in the HTML.

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

Nothing.