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

Responsive page using CSS grid

zeph_w 50

@ZephaW

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 am pretty comfortable with how my work has turned out. The biggest challenge I am currently facing; first is how the page looks after deployment (it is much bigger and doesn't fit as it did prior to deployment). Secondly, how to place the content in the middle of the web page as it looked in the desktop illustration

Community feedback

Corfaya 110

@Corfaya

Posted

Hey! Good job! I'll try to answer your questions.

I don't know if I understood your first question correctly, but, looking at the preview of the site, it seems to me that margins are missing for mobile viewing from the .testimonial-grid. For example,

.testimonial-grid {
margin: 50px 0;
}

To centre all the cards you used flexbox on the body. However, I notice that the container of cards (your 'testimonial-grid') is taking up the whole page. Try setting a width and a height on your container (e.g. 1000x600 px, or some other value, whichever seems more correct to you). In this case, change the flex-direction to 'column' so that the footer does not end up next to the container.

I'll conclude by suggesting two things:

  • use the required font, you can import it directly from google fonts to CSS. Go to Font Family page, add the required values to the basket and copy the '@import' section as the first line of the CSS. After that, use the font-family property: //CSS font-family property//.

  • you should find in the directory a *.svg for the background quotation mark on the first card. Insert it as background-image.

I was a bit long-winded, but I wanted to explain myself as best I could. Sorry. Good work!

0

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