Recipe page

Community feedback

• 

  Rgeb1•110

  @Rgeb1Posted 3 months ago

  I had the same problem styling the list markers too. To target the marker and change the colour, the code posted by Gehad28 will do that. Also to control the spacing between the markers and the text, you can try:

  ol, ul, li { padding-left: /* choose measurement */; }

  0
• 

  جهاد أحمد•280

  @Gehad28Posted 3 months ago

  I had the same issue with the image padding, I solved it as following:

  1. Apply padding to the card, let's say padding: 0 2rem;
  2. To make the image ignore the padding and take the whole width of the card, apply a negative margin with the same value of the padding to it. margin: 0 -2rem;
  3. Now, there would be another issue as the width of the image is smaller than the screen size of the mobile (375px), so, make the minimum width of the image equals the screen size of the mobile (the min-width used in the media query). And I also set the border radius of the image to zero, so it does not have a curve at the bottom.

  @media (max-width: 375px){
      .container{
          padding: 0 2rem;
      }
  
      img{
          margin: 0 -2rem;
          min-width: 375px;
          border-radius: 0;
      }
  }
  

  To style the list marker, use the following selector:

  li::marker{
      font-size: 12px;
      color: hsl(14, 45%, 36%);
  }
  

  Hope I helped.

  0