Skip to content
Submitted about 2 months ago

Recipe page

Sherrisa Classon•80
@Sherrisa
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?

I am most proud of my attention to detail. Next time, I will use the Figma file organization to organize my HTML to help me approach the project in a more orderly and sequential way.

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

Styling the table was challenging for me. I watched a couple of tutorials and read the W3Schools docs on CSS Tables.

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

I need help making my media queries cleaner. I have duplicate code for tablet and desktop that I'm sure is not necessary.

Community feedback

  • KapteynUniverse•2,170
    @KapteynUniversePosted about 2 months ago

    I think you can put background-color: var(--stone100) to body at the start,
    delete and (max-width: 768px) from the first media and just use

    @media screen and (width > 375px) {
  #wrapper {
    max-width: 616px;
    padding: 2.5rem;
    margin: 8rem auto;
    border-radius: 1.5rem;
  }

  main {
    padding: 2.5rem 0 0 0;
  }
  h1 {
    font-size: 2.5rem;
  }
}

@media screen and (width > 768px) {
  #wrapper {
    max-width: 736px;
  }
}

    Also need this before media queries so recipe can have a background below 375px screen size

    #wrapper {
  background: var(--white);
}

    I recommend you to use em and rem units instead of pixels, classes instead of ids.

    Pixels are fixed sizes and don't scale well on different devices. Instead, use rem or em, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible.

    I don't know if there is another reason but Ids should be unique if you attach a style to an id, you won't be able to reuse it.

    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