@Ghravitee
Posted
Hello RAFA-OL-DEV!!, congrats on completing this challenge. Your code could be a lot shorter and effective if you try using the grid layout. I realized you named most of your divs "grid-item" but didn't apply the grid layout. To do so, simply use the mobile-first workflow and then add give these properties to the container of whatever class you choose like so:
.grid { display: grid; gap: 1.5rem; grid-template-areas: "first" "second" "third" "fourth" "fifth"; grid-auto-columns: 1fr; // This is to make sure that additional columns take up exactly the same size. }
Then for media queries @media (min-width: ****em) { grid-template-areas: "first first second fifth" "third fourth fourth fifth"; } // Grid-template-areas is a powerful layout system for layouts such as these. Simply give the cards the grid area and position you want them to take, like so: .first { grid-area: first; }
- For your svg image issue, simply use a background property on it's container, like so:
.class { background-color: color; background-image: url(../images/bg-pattern-quotation.svg); background-repeat: no-repeat; background-position: top right 10%; // This will make sure your svg doesn't go beyond 10% of the container from the right. }I hope you find this helpful. Happy coding.
