Responsive recipe page

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted about 1 month ago

  Congratulations on completing this challenge. Your desktop version looks great. However, the page is not responsive, and breaks at the mobile size of a smart phone. To fix this, you need to add a media query. Try this:

        /* mobile styles */
        @media screen and (max-width: 480px) {
          body {
            padding-top: 2rem;
          }
          .contenedor {
            width: 90%;
          }
          table {
            width: 275px;
          }
        }
  

  Another suggestion is to color the dots in front of the lists, and the numbers in front of the instructions. This is done using the pseudo-element ::marker

        .resumen ::marker {
          color: var(--Rose);
        }
        .ingredientes ul ::marker,
        ol ::marker {
          color: var(--Brown);
          font-weight: bold;
        }
  

  Lastly, only the numbers in the nutrition table are colored. For this you need :last-child

        td {
          text-align: center;
          border-bottom: 0.1rem solid var(--Stone150);
        }
        td:last-child {
          color: var(--Rose);
          font-weight: 600;
        }
  

  Hope this helps.

  0