Skip to content
Submitted 3 months ago

Responsive Recipe-Page-Main with HTML and CSS

Okoro Joshua Osinachi•160
@Joshua65676
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?

Myself for improving in styling

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

Mobile screen, I am still working on it.

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

Media query (mobile screen).

Community feedback

  • Jeff Guleserian•480
    @jguleserianPosted 3 months ago

    Greetings, Joshua!

    Thank you for letting me take a look at your solution for the Recipe Card Challenge. It looks like you are still in process in completing it, but so far, it's looking great.

    I would be happy to help in any way possible with the media query for the mobile screen if you fill me in on what you are struggling with specifically. Just respond to my comment and we can converse over what is going on. Again, I'm happy to help however I can. Here is my solution in case you want to take a look.

    I also noticed a couple of other issues that may be of help.

    1. It looks like your recipe is not centering properly on the page. Here is the code that is the culprit:
    body {
    background-color: hsl(30, 54%, 90%);
    overflow-x: hidden;
}
.main-body {
    background-color: hsl(0, 0%, 100%);
    margin-top: 50px;
    width: 800px;
    margin-left: 310px;
    height: 1655px;
    border-radius: 15px;
}

    What this does is places your <main> container at an exact distance from the left and top margin and creates a height and width that are static. I recommend that you center it more dynamically by using a flex container. Something like this...

    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;   
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: hsl(30, 54%, 90%);
}
.main-body {
    background-color: hsl(0, 0%, 100%);
    margin: 128px auto auto;
    max-width: 736px;
    border-radius: 24px;
}

    The first part of these styles with the * addresses all the elements on the page. It removes any default borders and margins and set the box size to include any padding inside it. It's an easier way to think about the formatting and how big the content is.

    The second part turns your body into a flex box. What this means is that it will dynamically place anything in it according to the parameters you choose. In this case, we told it to align everything in a column and justify and align it to the center.

    The third part sets the margins of the of the <main> to the top of 128px (because that is exactly what Frontend Mentor has in its example) and "auto" for the sides and bottom. By setting it to "auto", the parent container, i.e., the <body>, is allowed then to move it to always be in the center. Additionally, we set the maximum width to 736px (which includes all content and padding, thanks to our earlier box-sizing), but allows it to shrink as necessary. And finally, setting the border radius at 24px is done because that is actually what the design specifies (have you opened the Figma file to see all the details?).

    Anyway, that is enough for now. Please let me know how I can be of more help with media queries, really anything. I'd love to see how your final project turns out. You are certainly on track to make it great!

    Happy coding, My Friend!

    Jeff

    Marked as helpful
    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