Design comparison
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
- @CorfayaPosted 12 months ago
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 GitHubJoin 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