Submitted 2 months ago
Responsive recipe page using ul and ol
@Princesval
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I'm really happy with the final result, especially the result on mobile devices.
What challenges did you encounter, and how did you overcome them?The last section: how to create that table effect? The way I found was to use a separate ul for each item and the tag hr at the bottom of each one.
What specific areas of your project would you like help with?A simple way to format images for mobile devices.
Community feedback
- @anderjackiePosted about 2 months ago
Hey man, great job! You did fantastic, it is really close to the design.
I have a couple of comments but you can take them as you please
- I can see you reset your stylesheet but you can use a more complete reset that is super helpful for further development. I based mine on this one reset-css.
- To use the table tag in your html you can style it with
border-collapse: collapse. This way you can have the effect of the design. - I believe you solution for the image was pretty clever. Another way to do it is let the container have a padding for bigger screens and remove it for smaller screens, but make all the other components of the recipe put their own padding for smaller screens. this way.
Keep the good work =)
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord