Hi Manuel,
On my desktop, the three cards at the bottom are flowing onto two rows. This is because of exact widths on those cards. It would be more responsive if you used flex properties like flex-grow -shrink and basis, something like flex: 1 1 33%;
. I also notice you are using grid but not defining the grid fully. Grid-template areas cannot replace the columns and rows altogether...
In the HTML there are a few changes I'd recommend. Like
- swapping h2 for a h1
- placing title-star in a semantic html element like a paragraph tag
- Maybe adding a visually hidden heading before the reviews. It just reads a bit strange with a screenreader jumping from the ratings to "Image, colton". Look up
.sr-only
for examples of how to add this type of hidden h2.
Back to layout... Here are all the things I just changed in devtools that makes it much more responsive. Have a look at either adding this as an extra stylesheet temporarily in devtools and inspecting the elements one by one, resizing the viewport often. Alternatively, try applying these changes one by one in the browser devtools to see if it builds your understanding of different ways to acheive the layout. I like to do these things with devtools open on the side so it's easy to resize the viewport a lot:
@media screen and (min-width: 720px) {
.card {
/* width: 330px; */
/* margin: 2rem auto; */
margin: 2rem auto 0;
flex: 0 1 33%;
}
.reviews {
/* flex-wrap: wrap; */
gap: 1rem;
}
.header > div:first-child {
/* padding: 0 3rem; */
padding: 0 3rem 0 0;
}
.title {
/* font-size: 36px; */
font-size: 3rem;
}
.card-2 {
/* margin-top: 4rem; */
}
.card-3 {
/* margin-top: 6rem; */
}
.header {
align-items: center;
}
}
.name {
margin: auto 0 0 0;
}
.card {
/* padding: 2.5em; */
/* grid-template-areas: "img name name name" "img graduate graduate graduate" "comment comment comment comment"; */
padding: 1.5rem;
grid-template-areas: "img name" "img graduate" "comment comment";
grid-template-columns: minmax(20px, 60px) auto;
gap: 0.5rem 0.8rem;
}
.profile-img {
width: 100%;
}
.graduate {
margin: 0 0 auto;
}
.comment {
line-height: 2;
}
.reviews {
/* align-items: center; */
/* margin-top: 4em; */
align-items: flex-start;
margin: 5% auto 0;
}
.title {
line-height: 1.2;
}
@media screen and (min-width: 1000px) {
.header > div:last-child {
padding-right: 0;
}
.reviews {
/* margin: 0; */
}
}
body {
min-height: 100vh;
overflow-x: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
/* margin: auto; */
/* width: 90%; */
margin: 1rem;
max-width: 1200px;
}
.header > div {
/* width: 100%; */
flex: 1 1 50%;
}
.header {
/* align-items: center; */
/* padding-top: 5%; */
margin: 0 auto 5%;
justify-content: space-between;
}
html {
/* line-height: 1.15; */
line-height: 1.5;
}
.card:first-of-type {
margin-top: 0;
}
.card.card-3:last-of-type {
margin-top: 4rem;
}
I hope this is helpful and gives you some ideas. Overall it's a nicely delivered semantic project, just needs a little more tweaking 🙂
@maadcode
Posted
Thanks @grace-snow
Wow! I will apply your suggestions. It definitely looks much better with your changes.
Thanks so much!