Skip to content
Submitted 3 months ago

Recipe page

Luís Gustavo Gorniak•160
@luisgustavogorniak
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?

It was a fun challenge, it made me test my media query knowledge, I'm very proud of being able to make it very responsive.

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

The hardest part was adjusting the image position in the mobile version. The image had to ignore the card's previous set padding. I did some position rules to some elements correctly fit, I think it worked.

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

It was really messy when I worked with the position property. The next content tag ended up on top of the image, I had to set a margin-top for it so it would go to the correct position. So any tips on how to deal with this would be helpful.

Community feedback

  • Juan•480
    @JEWebDevPosted 3 months ago

    @luisgustavogorniak

    Hello Luis!

    Congrats on finishing the challenge, it looks amazing and really close to the design files.

    Regarding your questions about the position let me explain to you why it happend:

    When you use position: absolute you take that element outside the normal flow of the page. In this case the img element. You gave the img element the following styles:

    position: absolute;
top: 0rem;
left: 0;
width: 100%;
height: auto;

    This made the Img element display on top of the page.

    And the next sibling element the content is behind the img element because "now it is the first element on the page". you can read more about absolute positioning in this freecodecamp article about it

    To fix this remove the position: absolute and the top: 0 and left: 0 styles from the img element. (Don't forget to remove the padding from the content element too or it will be pushed down)

    You don't need to absolute position it because you are already using flexbox on your main container.

    `

    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