Owner avatar recipe-page-main using responsive page

Community feedback

• 

  Mayen•440

  @Mayen007Posted 4 months ago

  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

  1
• 

  Kamal Alhejaili•60

  @KamalepPosted 4 months ago

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

  0