All solutions

Feel free to give me some feedback!

The "testimonial grid section" challenge helped me a lot to try and make this grid work.

I guess the only question i have is, whenever adding icons, I've seen multiple ways of doing it:

1. By creating a class for your icon, going in your css and then add it in css with background-image: url("images/xxx.svg");
2. <img src="images/image.jpg"></img> and edit it in css with img { }
3. <button class="button" data-icon="icon">xxx</button>

.button[data-icon="shopping-cart"]::before {
content: " ";
background-image: url("images/icon-cart.svg");
width: 15px;
height: 16px;
} 

which one is better to do and what's the difference

I did cheat a little bit and watched Kevin Powell's video on this project but it helped me a lot understanding grids better with the two methods shown in the video.

Feel free to give me some feedback!

Hey, So I started with the mobile version first and i knew it would be a problem after but how do i make the grid flip side when it goes from mobile to desktop since my images comes first in my HMTL. i tried experimenting with 'grid-column:' but it doesnt work.

Let me know what i can do.

Feel free to give me some feedback!

I got stuck with this challenge longer than expected but after watching some videos on grids i think i nailed it. I also saw that it's better to start with the mobile design so I did just that. I had some trouble with the desktop version but after finding out about 'grid-column: span 2;' it went much smoother.

The only problem i have with this challenge now is that the "tablet" version is not really optimized. I'm still struggling with having a margin in my viewport as my content shrinks down. Between 600px and 850px the content just merges into the left side of the viewport also.

This is just an updated version of this challenge with an improved desktop and mobile layout, nothing special.

Something i noticed though is that between 600px and 625px resolution, theres a little gap under the image in the desktop version, its very brief and i dont think anyone will notice.

I struggle with adding the cyan hover effet with the eye icon.

I'm pretty happy with the result but i still have some questions over some difficulties i have:

• I used grid and made all three columns 1fr wide, was that the right choice ?
• As i shrink down the resolution for the mobile version, at 900px wide the content gest pushed out of the left side of the screen, how do i avoid that.
• in my mobile version, the content doesnt take the whole sceen (width) idk if i was supposed to do so but i would like it to be more responsive, i guess it has to do something with the "display: block;" I used since "grid-template-rows" didnt let me put the three cards in one long "strip". maybe flexbox would've been better ?

Thanks for your help.

Hello, looking for feedback When i learned css i never used rem/em and vh/vw so this is a first time. Also i think I'm using unnecessary classes. Let me know if there was a more optimal way to write my html and css.

PS: Still have to do mobile version i just wanted to have some feedback first.

Hello,

Feel free to comment on anyhting you find unnecessary in my code or if there was a more optimal way to do this. Also, i struggled with putting my container in the middle of the page without using margin.