Skip to content
Submitted 4 months ago

recipe page with tailwind css

mofada•340
@mofada
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

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?

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

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.

  1. I tried to add padding-left, but it caused the field on the right to move.
  2. 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?
2. question two

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

  • haquanq ®️•1,585
    @haquanqPosted 4 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 by width: 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 helpful
    1

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