responsive landing of recipe page usinghtml and css

Community feedback

• 

  vitchet•80

  @vitchetPosted 5 months ago

  Hello, Jeisson!

  Very nice work, looks very close to design!

  But there are a few moments I want to mention:

  1. If you take a closer look to the mobile design you could notice that it's a little bit different from the one for desktop. In the mobile version there is no padding around the component, also there is no padding around the image. Your padding seems static, so the whole component is shrinking on mobile but the padding doesnt and it looks relatively bigger.
  2. Try using flex-box, it makes code cleaner and easier to maintain. It's really easy to get lost in all the margins and paddings. It may seem scary to use that technique, to be honest, I hesitated to use it myself, but this little game helps a lot. Try it out: https://flexboxfroggy.com
  3. In the nutrition table there is no line after the last line, using ":nth-child" pseudo-selector can help fix it.
  4. In ingredients section the markers are squares not disks. Yes, markers bring pain, but I believe after all the work you've done, you will easily deal with that problem.
  5. As you mentioned your self the html needs improvement. Semantic html is mandatory
     now days.

  Hope I didn't overwhelm you with all those notes. They are actually small, but can help you improve. For the rest, you did really great job, at the moment it's the best solution I've seen on the site.

  Keep going!

  Marked as helpful

  1