Design comparison
Solution retrospective
In the recipe page project, I used tailwind css for development, and I learned more about responsive design.
I also learned more about the semantic tags of HTML and the styles of :marker.
In the grid and native table attributes, I used the latter because I have hardly used the native table. Through this project, I also learned more about the table.
What challenges did you encounter, and how did you overcome them?I encountered several small problems. First, the list-style of li is controlled by css
Then the style control of table makes me feel very embarrassed and entangled
Finally, I also encountered a problem with responsive design. I don’t quite understand whether I should develop the mobile terminal or the PC terminal first. According to the responsive design of tailwind css, md @media (min-width: 768px) { ... }
should only take effect on screens above 768. So should I develop the mobile terminal first, and then develop the PC terminal based on the mobile terminal?
1. question one
There is a small flaw. I used the native table to implement the Nutrition at the bottom. The field on the left has no padding.
- I tried to add padding-left, but it caused the field on the right to move.
- Add padding-left to the field on the left, and then set the width, but fixed width will have problems on mobile. So is there any other better way?
I still have some doubts about responsive design. In tailwindcss, I can use the md: tag to operate responsiveness. I don’t quite understand whether this means that the mobile terminal should be used first?
For example, the cover: h-[200px] md:h-[300px] at the top, the mobile terminal or the default is 200px, and the PC terminal or when the width exceeds 768px uses 300px
Community feedback
- @haquanqPosted 3 months ago
Hello @mofada,
Answering your questions:
- You can use % unit to set
width
on each cell on the same row (ex: keep them half bywidth: 50%
on each cell). - Tailwind by default uses mobile-first principle so by using
md:h-[300px]
equal to:
/* meaning apply below styles when screen at least 768px*/ @media screen and (min-width: 768px) { element { height: 300px; } }
- You can override it's default value in
tailwind.config.js
file.
Have a nice day!!!
Marked as helpful1 - You can use % unit to set
Please log in to post a comment
Log in with GitHubJoin 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