Testimonials Slider (unfinished) - CSS (Grid) & HTML

Solution retrospective
-
Is there a way I could center the left text vertically on desktop screens with grid, without grouping the text together in a Div?
-
How to change the 2nd column on desktop screens to fit the width of the person's name?
Perhaps a good approach in general is to use Flex when it can do the job, and for anything where it's not enough, use Grid?
Thank you!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @pikapikamart
Hey, good work on this one. The layout on desktop seems a bit off since the text is on the top-left though the mobile state is really good.
Regarding your query.
-
I think what you did on the overall layout is somewhat confusing. Since you declared the whole
body
on a grid and making many rows and columns to be honest. Since you are using grid, making that aligned vertically is hard, since there is a specified placement on it. A fix on it would be that adjusting the body'sgrid-template-rows
and making a row for the text itself, a row that will be centered, then just place the text on that specific row. -
This second one is confusing, what are you exactly referring to? It will be better if it is specific.
-
On this one, flex will be really good on this one. On this, using flex will be easy, since all you got to do is that. Setting the
min-height: 100vh
of thebody
tag and make itdisplay: flex
then just addalign-items: center
to achieve that properly centered content. Making two container, one for each on the left side and right side.
Some other suggestions would be that:
-
Making both the person's name and person's position to be nested in header tags. Since this a testimonial page right, so announcing headings on a screen-reader, it will be redirected fast to the person's information.
-
You forgot to make the testimonial slider. The right side should be a slider since there are those buttons. Doing that will be awesome if you were to refactor it okay.
-
There are too many independent elements on the markup. It will be really good if somehow you group them according to their relationship. Example the person's name and person's role, they could be group since it is information of the person right. Those
img
tags, it will be better if you just use them asbackground-image
since they are just decorations right, they doesn't add up to the context itself. Only keeping the person's image intoimg
tag.
Though I find the mobile state really good, but making that slider works will level it up. But still, good work on this^
-
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