Submitted 8 months ago

Recipe-page with Flex-box and CSS Grid

LuBrito•60

@Luizadebrito

Preview site View code

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'm pround to be able to build this recipe page.

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

Apparently my bugged and I just couldn't put a margin-bottom in the breakpoint of Mobile to Desktop and I don't know why, so I involved all the container with another div to put the margin-bottom.

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

If there's anything I could change to improve this project, I'd be glad to receive feedbacks.

Community feedback

Vishika•380

@VishikaPosted 8 months ago

Awesome job! Your approach is certainly cleaner and more responsive than mine.

Personally I divided the image dimensions by 2. This is a practice that's used to support higher resolution screens. Then I doubled the margin and added these two numbers together to restrict the width of my container.

I think your margin problem stems from you using

@media screen and (min-width: 767px) {
    .margin-bottom {
        padding: 4rem 0;
    }
}

.container {
    margin: 0 auto;
}

Instead try

@media screen and (min-width: 767px) {
    .margin-bottom {
            display: flex;
            justify-content: center;
    }

    .container {
        margin: 4rem;
    }
}

.container {
    margin: 0;
}

Please log in to post a comment

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