Skip to content
Submitted 7 months ago

Owner avatar recipe-page-main using responsive page

foundation
Kamal Alhejaili•60
@Kamalep
A solution to the Recipe page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I am proud of the first web page challenge, it takes around 5-7 days. the next time I'll do it on a day

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

the challenge was how to make media query, especially how to make image fit, I'm not finished yet,

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

how to make the image fit on media query

Code

Please log in to post a comment

Log in

Community feedback

  • Mayen•440
    @Mayen007

    Hey Kamal! Your work is coming along beautifully—great job so far! Here’s some feedback to make your project even better:

    Image Responsiveness

    I noticed that your image overlaps the recipe container. To address this, you can make your image responsive by setting its width to 100% so it adjusts to the width of its parent container. This ensures that your image scales naturally and maintains its aspect ratio.

    Here’s an example CSS snippet you can use:

    img {
  width: 100%;
  height: auto; /* Maintains aspect ratio */
}

    This approach eliminates the need for media queries to handle responsiveness in most cases.

    Simplifying the Markup

    It looks like the container-img div isn't adding much value to the structure. You can simplify your HTML by removing it and applying the necessary styles directly to the image element. This makes your code cleaner and easier to maintain.

    Keep up the fantastic work, Kamal, and happy coding! 😊

    Marked as helpful
  • Kamal Alhejaili•60
    @Kamalep

    Thank you Mayen, i will take your notice, and I'll see what can I do

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