recipe page--have some issues with media query

Community feedback

• 

  Osman Bay•690

  @osmanbay90Posted 9 months ago

  Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:

  Media Query Not Working: Your media query seems to be well-formed, but it might not be effective due to specificity issues. Ensure that the CSS rules within your media query are overriding the rules defined outside of it. To ensure this, you may need to increase the specificity of your media query selectors. Try adding !important to your mobile-specific rules temporarily to see if they take effect. If they do, it suggests a specificity problem. Also, make sure your media query is placed after the main CSS rules, so it can override them.

  Styling Table Lines: To achieve the table lines styling as shown in the design picture, you can use CSS border properties. Specifically, set borders on the <td> elements to create lines between them. Here's how you can modify your CSS:

  CSS code

  • CSS for table

  table {
      width: 100%;
      border-collapse: collapse;
  }
  
  th, td {
      border: 1px solid var(--LightGrey); /* Add borders to cells */
  }
  

  By setting a border on both <th> and <td> elements, you'll get the lines you desire. Adjust the border properties as needed to match your design.

  Additionally, here are some improvements you might consider:

  Organizing CSS: Group related CSS rules together for better readability and maintenance.

  Consistent Indentation: Maintain consistent indentation for better code readability.

  Accessibility: Ensure your website is accessible to all users, for example, by providing alternative text for images (alt attribute).

  Responsive Design: Check responsiveness on various devices and adjust styles as needed. Test your media queries thoroughly to ensure they work as expected.

  Remember, practice makes perfect! Keep refining your skills by tackling more challenges on Frontend Mentor. Happy coding! 🚀

  Marked as helpful

  0