@leecockcroft
Latest solutions
Responsive Testimonials Section Using CSS Grid
Submitted 3 months agoEven though I achieved the desired look, I think the code is messy and there is a lot of repetition.
Latest comments
- @wstypr
You nailed the layout. But there are rooms for improvement, like photos border-radius, text font and footer bg image for better match the design
- @DomCroatiaWhat are you most proud of, and what would you do differently next time?
I'm most proud of making this challenge responsive.
What specific areas of your project would you like help with?I'd like to get some help regarding grid and how to make it work better with responsiveness (media queries). When gradually making viewport bigger/smaller, is there any better way to make responsive grid work with media queries rather than having 2 ways (or methods) to shift elements around?
@wstyprAn approach you can try to make the testimonials responsive is:
- Put all the testimonials inside a container
- Don't apply any display to the container. This will be the mobile version, they will stack on top of each other.
- Use a media-query for tablet display. Apply display:grid to the container.
- Arrange the grid template area and put the testimonials on their respective places. This will be the tablet version.
- Use a media-query for desktop display.
- Arrange the grid template area and put the testimonials on their respective places. This will be the desktop version. Checkout my solution: https://www.frontendmentor.io/solutions/responsive-testimonials-section-using-css-grid-gwJFEtC8Kj
Marked as helpful - @AntonexWhat are you most proud of, and what would you do differently next time?
That I figured out the problems on my own and did not require google this time
What challenges did you encounter, and how did you overcome them?The desktop layout
What specific areas of your project would you like help with?Man my code is so messy, I hope to improve and write more clean and minimalistic code
@wstyprHey, looking good, but you can improve the body background color and its top padding to better match the design.
- @Igho-Okeoghene@wstypr
Hey good job. But I think the design divides the picture and the text into two section with the same width, your text is a bit bigger than your image.
- @MehradJ@wstypr
Hi, nice job. The font size and the table row padding can definitely be improved.
- @aabdulsaburWhat are you most proud of, and what would you do differently next time?
I was able to get it done quite close to the design
What challenges did you encounter, and how did you overcome them?I had challenges with the profile avi. I wrapped the img in a container and I tried working with that and I couldn't. I was able to figure it out by targeting the img class directly
@wstyprNice job! But I think you can improve the spacing between texts and the profile picture to match the design exactly.
