Recipe Page Challenge

Community feedback

• 

  Ahmed•80

  @Ahmed-l2Posted 5 months ago

  For the mobile design, you can use CSS Media Queries, it will only take you a few minutes to understand how it works. CSS Media Queries allow you to apply different styles for different screen sizes, making your web design responsive and adaptable to various devices.

  Here's an example:

  Desktop Styles

  main {
      margin-top: 100px;
      margin-bottom: 50px;
      border-radius: 20px;
      padding: 40px;
      background-color: lightblue;
  }
  

  Mobile Styles with Media Queries

  To change the main element's style for screens that are 768px wide or less, use the following Media Query:

  @media (max-width: 768px) {
      main {
          margin-top: 20px;
          margin-bottom: 20px;
          border-radius: 0;
          padding: 10px;
          background-color: lightcoral;
      }
  }
  

  This Media Query modifies the main element's styling specifically for smaller screens.

  I hope this was clear enough for you to understand :)

  0