All solutions

• 
  Submitted 17 days ago

  Responsive Product Preview Card

  #sass/scss#pure-css

  • HTML
  • CSS

  1

  30

  ---

  I struggled a little bit with deciding on whether to just use an img tag with srcset to multiple files or to use the picture tag. Any insight on what use cases are better for eitehr would be helpful.

• 
  Submitted 19 days ago

  Responsive Recipe Page with Mobile First Workflow

  #pure-css

  • HTML
  • CSS

  1

  40

  ---

  I'd specifically like help with the ::marker selectors and styling of the bullet points next to list items:

  .instructions ol {
      padding-left: var(--space-300);
  }
  
  .instructions li {
      padding-left: var(--space-200)
  }
  
  .instructions li::marker {
      font: var(--text-preset-5);
      color: var(--brown-800);
  }
  

  Additionally, the text wrap of the nutrition description p tag on mobile could look better if anyone has tips on text-wrapping properties.

• 
  Submitted 20 days ago

  Responsive Social Links Profile

  #pure-css

  • HTML
  • CSS

  1

  60

  ---

  I'd like help with the media queries. Any feedback on these styles would be helpful:

  @media screen and (max-width: 48rem) {
      main {
          padding: 2.5rem;
      }
  
      .container {
          width: 28.5rem;
      }
  
  }
  
  @media screen and (max-width: 23.4375rem) {
      main {
          padding: 1.5rem;
      }
  
      .container {
          max-width: 20.4375rem;
          padding: 1.5rem;
      }
  }
  

• 
  Submitted 22 days ago

  Blog Preview Card

  #pure-css

  • HTML
  • CSS

  1

  10

  ---

  I read the problem description and it said that the font sizes should be smaller on mobile devices so let me know if this solution satisfies that requirement.

• 
  Submitted 26 days ago

  QR Code Component using CSS Flexbox

  #pure-css

  • HTML
  • CSS

  1

  70

  ---

  I'm specifically looking for help with accessibility if there's any other components I could add to help with that.