Recipe Page

Community feedback

• 

  Mohammad Irfan•30

  @Mohammad-Irfan-NoorzadaPosted 2 days ago

  Hey there! I reviewed your recipe page, and here are a few suggestions to improve both functionality and design:

  HTML Improvements: Font Link Redundancy: You've included the same Google Fonts link twice. It would be more efficient to combine them into one tag to reduce the page load time.

  Image Accessibility: The alt attribute of your image is generic. A more descriptive alt text can improve accessibility for screen readers and help with SEO. For example: "A delicious omelette with vegetables served on a plate."

  Empty Table Cells: Your nutritional information tables have empty cells (td). Consider either removing the empty cells or adding actual content to them.

  CSS Improvements: Font Size: The font size of .70rem in the body is a bit small for comfortable reading. Try increasing it to at least 1rem to improve legibility for users.

  Fixed Width on .outer-container: Setting the .outer-container width to 50% and using min-width: 600px could be problematic on smaller screens. Consider using more flexible units, like percentages or vw (viewport width), for better responsiveness.

  Overflow Hidden: The overflow: hidden rule on .outer-container might hide content unintentionally, especially on smaller screens. Use overflow-x: auto to allow horizontal scrolling if necessary.

  Inconsistent Padding and Margins: The sections for preparation and ingredients look a little cramped. Increase the padding and margins for better spacing and readability.

  Nutrition Table Layout: The nutrition table has a fixed width, which might not look great on larger screens. You can set width: 100% for a more responsive layout.

  Mobile Responsiveness: Your media query for max-width: 375px works for smaller mobile screens, but it might need further adjustments to ensure the layout looks great on tablets and larger screens too.

  0
• 

  DYBDDY•210

  @DYBDDYPosted 2 days ago

  .

  0