Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Grid

@ehoda9

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I want to know how to make this :

-bg-pattern-quotation.SVG

Responsive or how to add it what is the better way

in background or just add it position absolute <img>

Community feedback

P
Dave Quahβ€’ 670

@Milleus

Posted

hi there o/,

I think using background-image to add the quotation image is fine. A small change that could help is to define the background-position to start from the top and right with an offset so that scales more consistently with the design.

e.g.

background-position: top right 15%;
/* or you can also do this */
/* background-position-x: right 15%; */
/* background-position-y: top; */

Adding the quotation image with <img> element and position absolute works too, but it may require a bit more work. Most likely the text will require adding a z-index and a position: relative (for z-index to work) to place it above the <img> element.

If using <img> element with position absolute, I would also define the position to start from the top and right with an offset, e.g. top: 0; right: 15%;.

Hope this helps :)

Marked as helpful

2

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord