recipe-page-main

Community feedback

• 

  Marzia Jalili•7,170

  @MarziaJalili

  Posted 4 months ago

  Hey there!

  Here's the answer to your question:

  I reviewed the code and figured out you hadn't used media queries.

  Media queries are essential for creating responsive designs that adapt to different screen sizes, especially for mobile devices.

  Here’s a basic code of how to implement them:

  @media (condition) {
    /* CSS rules here */
  }
  

  In the condition you are required to set some breakpoints.

  • By setting this media in your code you'll make the code responsive for mobile, too:

  @media (max-width: 30em) {
  /* set a fixed width for the section so it doesn't overflow */
    section {
      max-width: 300px;
    }
   
  /* ensure that everything nested inside also has the same size */
    section > * {
      max-width: 300px;
    }
  }
  

  • Also, get rid of lines 154 and 143 in style.css that has the code (flex-wrap: wrap;). It's causing some overflow issues, man.

  • Finally, set the code below for the image to prevent it from overflowing:

  .header img {
    max-width: 100%;
  }
  

  This definitely works!

  In case you find any difficulties, let me know.

  😎😎😎

  00
• 

  Leoy96•120

  @Leoy96

  Posted 4 months ago

  Awesome

  00