All comments

• 

  Elameen Daiyabu• 160

  @elameendaiyabu

  Submitted 8 months ago

  Need help on how to put that quotation pattern svg in the background of the first element. Thanks

  

  Testimonial Grid Site Using Grids and Flexboxes

  1

  40

  

  Jeet Gangwar• 160

  @i-amWin

  Posted 8 months ago

  Set the position: relative; and isolation: isolate; on first card and add that quotation mark on the pseudo element as shown in code below:

  .card:nth-of-type(1) {
        grid-area: card-1;
        background-color: hsl(var(--moderate-violet));
        isolation: isolate;
        position: relative;
  }
  
  .card:nth-of-type(1)::before {
        content: url("./images/bg-pattern-quotation.svg");
  
        position: absolute;
        top: 0;
        right: 8%; /* Adjust this according to your preferences. */
        z-index: -1;
  }
  

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Saumya Ranjan• 10

  @saumyaranjan1111

  Submitted over 1 year ago

  I found it difficult to shrink the image size down to fit to the outer card div. I want to know if there was a better way to do this project only using flexbox and grid and using as less native css styling as possible.

  

  QR Code Component using CSS Flexbox

  1

  70

  

  Jeet Gangwar• 160

  @i-amWin

  Posted over 1 year ago

  You can do something like this

  HTML:

  <div class="card">
  <img src="./images/image-qr-code.png" alt="qr code" class="card__img" />
  
  <div class="card__content">
  </div>
  </div>
  

  CSS:

  img {
  display: block;
  max-width: 100%;
  }
  
  .card {
  width: min(335px, 100% - 2rem);
  background-color: hsl(0deg, 0%, 100%);
  padding: 1rem;
  border-radius: 1rem;
  }
  .card__img {
  width: 100% /* Optional, if width of img is less than width of card */
  border-radius: 10px;
  }
  

  Marked as helpful

  1

  This comment has received 1 replyShow