Submitted 2 months ago

Recipe page solution

Lara Mesa• 160

@Lara-art

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Recipe page

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

With this exercise, I learned something I had never done before: changing the color of the list item markers.

li { list-style-type: inherit var(--color-Dark-Raspberry); }

& ::marker {
    color: var(--color-Dark-Raspberry);
}

}

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

I also had to set the image to position: absolute in media, so that it wouldn't be affected by the div it was placed in.

@media screen and (min-device-width: 325px) and (max-device-width: 600px) {

.card {
    border-radius: 0px;
    margin: 150px auto 0px auto;

    & img {
        position: absolute;
        top: 0;
        left: 0;
    }
}

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

I’m not sure if the solution I gave for the image in the media query is the best one. How could I improve it?

Community feedback

juliusalberto• 220

@juliusalberto

Posted 2 months ago

I saw your code and it's readable for me! Good job! Your HTML page uses semantic HTML, and I think it's accessible enough. It looks good on range of screen sizes (I tried it on phone and tablet).

There are some things that could be improved, tho. For the desktop page, I think that the gap between elements in a section is a bit off. The font weight are also off (but it's a minor thing tho).

I really like the way you use grid for your table. I hadn't thought of it previously, should have used it next time. I have similar solution w/ you with regard to the absolute position of the picture. In my case, I removed the padding for the card and add some extra padding for the text content.

Overall good job.

Marked as helpful

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