All comments

Elameen Daiyabu•160

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