Responsive recipe page using device breakpoints

Community feedback

• 

  P

  Grid-World•150

  @LiJunXiang1234Posted 9 days ago

  Great practice! By zooming in on the entire page to improve readability, it shows that you are still maintaining your thought process during practice and always considering the user's needs.

  There are some details to pay attention to, such as adjusting the font weight of the main title; a value of 400 or 500 would be less heavy. The card itself also needs some padding at both the top and bottom, so adjusting the margin values for the top and bottom of the card is necessary.

  For the final content, the text paragraphs do not need to be placed inside a table. Set the table width to 100%, so it will be as wide as the card.

  Marked as helpful

  1

  ---

  

  Giovani Oliveira•90

  @GiodosvaniPosted 9 days ago

  @LiJunXiang1234 Thank you for the reply!

  i'll change the font weight, thank you for the suggestion :)

  For some reason, i wasn't able to get these margins on the card Not sure what was going wrong, but i'll take a closer look!

  I really thought that the paragraph was the header of the table, lol

  0

  

  P

  Grid-World•150

  @LiJunXiang1234Posted 9 days ago

  @Giodosvani I reviewed your code. Maybe adjusting the margin in:

  .container {  
      background-color: white;  
      max-width: 600px;  
  }
  

  could help you.

  By the way, in the design, the last row of the table doesn’t have a bottom border. You can set it individually to hide the border.

  As for putting that piece of text into the table, I can only say hahaha, an interesting misunderstanding! But in a way, it actually helped you learn how to integrate tables! There's nothing bad about that!

  Marked as helpful

  1

  

  Giovani Oliveira•90

  @GiodosvaniPosted 5 days ago

  @LiJunXiang1234 Thank you for the review! I'll try to get this in a minute :)

  0