Recipe Page

Community feedback

• 

  Jvps321•50

  @Jvps321Posted 6 months ago

  I noticed that it was bigger than proposed and when trying to make it in mobile size, half of the site becomes unavailable because it goes up and there's no way to see it, to fix this just remove the "height" of the boby. A tip is also to add a “div” to cover the entire content of the site, but leaving the “picture” tag out to facilitate responsiveness. As for making it responsive, just take it and put a "@media screen and(max-width:590px) {what should be changed}", an example of what you can change, if you added the extra div you You can remove the "padding" from the article and place the "padding" in the extra div to leave the image occupying one side of the screen to the other in addition to removing the "border-radius" from the image. If you have any doubts about something I said and want to see how I did it, link to my GitHub: https://github.com/Jvps321/recipe-page-main

  0
• 

  P

  Paul•470

  @mayor-creatorPosted 6 months ago

  Hi @brianopedal,

  Congrats on finishing this challenge. Here some suggestions to help improve your code.

  • Use the <img /> element for the image instead of the picture element. the picture element is used when you have multiple images that needs to be displayed depending on device viewpoint.
  • To make the image cover the space within the article class card, you can move the <h1> and <p> element outside of the class and apply this style to <img/>
  • img { height: auto; max-width: 100%; object-fit: contain; }

  Happy Coding

  0