All comments

Elameen Daiyabu•160

@elameendaiyabuSubmitted 9 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

Jeet Gangwar•160

@i-amWinPosted 9 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

Saumya Ranjan•10

@saumyaranjan1111Submitted 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

Jeet Gangwar•160

@i-amWinPosted 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