Submitted about 2 years ago
Social proof section with basic HTML and CSS (responsive)
@Decimo-10
Design comparison
SolutionDesign
Solution retrospective
- To make the stair-like layout at the bottom of the page for the reviews, I gave a fixed height for that row in the <main>. I've read that it is usually not a good idea to give fixed height to anything. Is there a better/proper way for it?
- Do I need to put the personal reviews in a <q>/<blockquote>?
- For the 5 star reviews I implemented the stair-like layout with relative position. Another idea was to do it the same way like the personal reviews but with fixed width. Is it a good way to do it?
I greatly appreciate any kind of feedback.
Community feedback
- @AdrianoEscarabotePosted about 2 years ago
Hi Decimo-10, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:
wrap this div:
<div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="https://www.frontendmentor.io/profile/ Decimo-10">Decimo-10</a>. </div>
with the
footer
tagIf we see how the layout is behaving at higher resolutions, with the help of google dev tools, we will see that it is stretching a lot, to solve this we can use a max-width with the value we want the content to stop growing and to center use a margin: 0 auto;
@media (min-width: 1440px) body { max-width: 1440px; margin: 0 auto; }
The rest is great!
I hope it helps... 👍
Marked as helpful0
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