Skip to content
Submitted 7 months ago

Recipe Page

Erratic Enigma•200
@erratic-enigma
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?

This is my first time experimenting with container queries, though I only used them for applying border-radius on the image when the main element reaches certain minimum widths:

@container (width >= 42.875em /* 686px */) {
  border-radius: …
}

Interested to take advantage of them on larger projects in the future.

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

On small viewports, the image fits across the full width of the page, but the rest of the content has whitespace on both sides. I didn't want to use an extra wrapper with padding applied around the content. Instead, I made use of grid with the following columns:

grid-template-columns: [gutter-start] minmax(auto, 1.75rem) [content-start] 1fr [content-end] minmax(auto, minmax(auto, 1.75rem) [gutter-end];

positioned all the content inside of the content column:

main > * { grid-column: content; }

then positioned the image across all available columns:

.opening-image { grid-column: gutter; }
What specific areas of your project would you like help with?

I'm not entirely sure if I structured the markup for the table properly, so any pointers on that would be nice.

I'm also not sure about the way I applied positioning styles to the ul and ol elements. Are there any better methods than using margin and padding?

Community feedback

  • M•940
    @Dev-MV6Posted 7 months ago

    Hi there 👋, congratulations on solving this challenge, your solution looks great.

    I think you are using the table element correctly, remember you can always explore different ways to get the same result using CSS and Flexbox, in any case, don't worry about the table. The way you approached it is completely valid.

    Now, using margin to set the spacing between the list items is completely valid as well. In fact, I think it is the most common way. If you are curious about alternative ways to set the spacing between the items in a list, Flexbox has you covered:

    .list {
  display: flex; /* enable Flexbox in the container */
  flex-direction: column; /* position children elements in a column */
  gap: 0.5rem; /* the space you want between the children elements */
}

    You can read more about Flexbox in this article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Hope you find this helpful 👍

    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