All comments

• 

  Dmytro•70

  @alkersanSubmitted 8 months ago

  What challenges did you encounter, and how did you overcome them?

  It was tricky to figure out how to prevent vertical and horizontal content loss on smaller viewports, e.g. less than 320px (see the screen recording). Here's the snippet that worked for me (and resulting recording):

  const Main = styled.main`
      ...
      min-width: fit-content;
      min-height: 100%;
      
      display: flex;
      justify-content: center;
      align-items: center;
  `;
  
  const CardWrapper = styled.div`
      // Don't grow horizontally more than minimally possible to contain the card
      // I guess it works because nested image has fixed dimensions 
      max-width: min-content;
      ...
      img {
          display: block;
          width: 288px;
          height: 288px;
      }
  `;
  

  

  QR Code Component

  1

  20
  

  Dan Elvey•10

  @d-elvPosted 4 months ago

  Honestly man this looks great, I couldn't really point to a specific thing to improve on. Only differences in how I approached it.

  I've been taught to always use class names for styling as it helps with debugging, but like I say, I'm not sure how I would improve upon your solution.

  0