Skip to content
Submitted 7 months ago

Simple Omelette Recipe

Jose Naranjo•50
@naranjo77
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?

That I was able to complete this on my own. One thing I would do differently next time is leaving comments in my code to know what does what so i don't forget or I can use it again in the futrue.

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

I had a hard time centering my main container in the middle. i was able to find online resources to help me out.

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

I do not know how media queries work so i was unable to complete the task for the mobile. I needed help spacing my "th" and "td" in my table to create more space between them, i tried many things but and searched online but I couldn't find anything that helped me. I would also like to learn more on how to center better your content.

Community feedback

  • Chirag•400
    @chirag-bishnoiPosted 7 months ago

    There is no need for media queries in this particular project. HTML elements are mostly responsive by default except images. Images are inline that's why they don't shrink and because of this our whole content don't shrink. To fix that first of all remove height: 200px; and width:450px; from your image tag and give your image tag width:100%; . Once you'll do that your content will start shrinking with the screen as it should be.

    Now, coming to the second part your question about tables. Just like images tables too are inline elements that means we have to give our table width:100%;. Once you'll do that, you can remove display:flex; from your container as it is completely unnecessary. And the last part of your question about centering content, well there are many ways to center something. You have used flex on your body tag but it's not necessary, instead use margin-inline: auto; it will center the div horizontally and finally margin-block: 4rem; to give some space on top and bottom.

    You can see my project for comparison, hope it helps :)

    1
    Jose Naranjo•50
    @naranjo77Posted 7 months ago

    thank you, I will be adding the changes now :). @chirag-bishnoi

    1
    Chirag•400
    @chirag-bishnoiPosted 7 months ago

    @naranjo77 I just notice one thing in your layout, maybe it's because I didn't specify it but when I was talking about margin-inline and margin-block, I was talking about your #container not the body. Otherwise everything is fine 👍

    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