Submitted 11 months ago

Responsive Testimonials Grid Section

Annika Veksø• 40

@Veksoe

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Testimonials grid section

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

I had some issues with "resetting" the grid in the media queries, but I managed to figure it in the end - I think.

Everything else seems to have went okay, but I do have some questions I hope someone can help me with!

We are given some sizes for desktop and mobile, and I'm not sure how to work with them. I believe my screen is 1920px wide, so do I have to do anything in the code to match the 1440px or is the given size mostly for those working on screen smaller than the 1440px? I hope my question make sense.
Should I have added some shadow? It seems that some of the boxes have shadow, but in the mobile version the shadow seems a bit more random. I feel like all the projects have shadow on the bottom and right side, so is just something from FrontendMentor, or an actual design choice?

Community feedback

Mtalafa• 350

@Mtalafa

Posted 11 months ago

Hi, Annika

Regarding your question about the sizes. 1440px refers to the size of your design. In your case this is the main. You can remove the margin from the main and add max-width 1440px. then in order to center it you use flexbox on the body adding a min-height of 100VH align items and justify content center

If you want it perfectly centered you need to remove the footer that is added by default. The one saying challenge by frontend mentor

Hope this helps. Have a good day

Marked as helpful

Annika Veksø• 40

@Veksoe

Posted 11 months ago

@Mtalafa Thank you for the answer! A good day to you too!

Vladimir Gatara• 250

@vgarmy

Posted 11 months ago

Hey, regarding the shadows, its a yes, you shouls add more shadow. Try something like this.

box-shadow: 0px 5px 42px -24px rgba(0, 0, 0, 0.43);

//Vlad

Marked as helpful

Annika Veksø• 40

@Veksoe

Posted 11 months ago

@vgarmy But in this case, is it on all the boxes? I feel like only the "outer" boxes that have some shadow, and the same boxes have shadow on in the mobile version, making it rather weird. Am I just seeing things wrong?

Please log in to post a comment

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