Hi, I'm afraid there are a lot of issues with the way you've gone about this.
One point to note is every one of those star images should have alt="" aria-hidden="true" so that screenreaders don't read out "image, star, image, star, image, star..." etc
As for the rest, take a look at these quick changes I just made in the browser to improve the desktop version. Apply each one by one and watch what happens, hopefully it will help you understand where you can make improvements:
/* main.css | https://social-proof-section-zeta-flax.vercel.app/css/main.css */
.headline {
/* padding: 7.8rem 3rem 3rem 10.5rem; */
}
.ratings {
/* padding-top: 8.8rem; */
/* padding-left: 2rem; */
}
.reviews {
/* padding-left: 10.3rem; */
/* padding-top: 1.8rem; */
align-items: flex-start;
}
.ratings ul li {
/* width: 65%; */
width: calc(100% - 6rem);
}
#container {
/* grid-template-rows: 50% 50%; */
/* grid-template-columns: 50% 50%; */
/* width: 100%; */
/* height: 100vh; */
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
padding: 2rem;
max-width: 1440px;
gap: 3rem 1rem;
}
.review-box {
/* width: 28.3%; */
/* height: 65%; */
float: ;
flex: 1 1 33%;
}
.review-box:nth-of-type(3) {
margin-right: 0;
}
body {
display: grid;
place-content: center;
height: ;
min-height: 100vh;
}
Good luck
@JaJamaRu14
Posted
@grace-snow Thank you very much for your feedback! I guess the way you fixed it makes the page more responsive?
You gave me an advice before that I should not use "position: absolute" too often for profile-card challenge. So I tried to do it in a different way this time.
I have used bootstrap for my past challenges but I did not for this one. But either way I guess I am using paddings and margins too much and makes it unnecessarily difficult for myself and not responsive design...
Will try to look other people's code more and see how I can improve.
Thank you very much!
@JaJamaRu14 I'd be tempted to do the main content layout all with grid tbh too (instead of having reviews in their own container).
How you're using grid at the moment isn't really bringing any benefit because you're only really using it to stack two rows of content.
Whereas if you had a 6 Column grid, you'd be able to lay out the top two sections (3 cols each) and the bottom 3 sections (2 cols each) all on the same grid
