Recipe Page

Community feedback

• 

  Dylan Heslop•1,570

  @dylan-dot-cPosted 10 days ago

  Well done on completing this challenge!!

  Looks awesome!

  I see an interesting issue with the media queries that you used, I believe that it might be too specific or too large. So let's think about it this way. Laptops/Desktops screens have various sizes and by convention sizes of 1024px would be considered as laptop, 768px would be tablets and 375px would be mobile. You had a media query for min-width: 1440px which is to say only for laptop screens 1440px and large, this is actually on the wider range of laptops so any laptops that are larger than 1024px but smaller then 1440px would be seeing the mobile layout(like mine) whcih isnt too responsive.

  I'm basically saying you should lower the threshold for your media query you can do 768px(since the width of the card would be about 700px) and it would look good on tablets as well.

  Also you should change the color of the text, as it's not the exact color used in the design, I think it should be stone-600 for all text thats not headings.

  There is also a small detail that the list marker for the unordered lists should be aligned vertically to the text, so you might have to do alot of extra code for that(tho it's not that important).

  Also consider making the nutrition table an actual table, it good that you used grid and all, but its always nice to use semantic elements and tags to get a desired effect. HINT: `you might have to use border-collapse: collapse to add a border on the table tr/td/th elements. It's also good for practice.

  It's also good that you used the section elements and the figure for the image(I didn't). Anyways, I would appreciate it if you could check my solution out and also provide some feedback.

  Take care.

  0