Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 4 years ago

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

bluepersia•1,055
@bluepersia
A solution to the Coding bootcamp testimonials slider challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


  1. Is there a way I could center the left text vertically on desktop screens with grid, without grouping the text together in a Div?

  2. 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!

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Raymart Pamplona•16,040
    @pikapikamart
    Posted about 4 years ago

    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.

    1. 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's grid-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.

    2. This second one is confusing, what are you exactly referring to? It will be better if it is specific.

    3. 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 the body tag and make it display: flex then just add align-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:

    1. 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.

    2. 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.

    3. 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 as background-image since they are just decorations right, they doesn't add up to the context itself. Only keeping the person's image into img 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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit 1st-party linked stylesheets, and styles within <style> tags.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub