Skip to content
Submitted about 4 years ago

Mobile first, compatible tablet & Desktop

Mallory•120
@azerroth11
A solution to the Testimonials grid section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi all, I'm happy with the overall result, especially having been able to change le layout for mobile/tablet and desktop. But I encountered a few issues:

1)How do I make my content centered in the page ? I used a .main to put all my content into on which I set display: grid and place-items: center hoping it would help but it didn't. And margin:auto doesn;t seem to do it.

  1. How do I force my cards to be wider rather than higher while using grid-template-areas ?

  2. Can I make the content adapt to the container rather than the container adapt to the biggest content box ?

Thanks a lot for any answer regarding those but also any suggestions to make my coding better overall !

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • KT•390
    @KtGitIt

    Hello Mallory 👋🏼,

    You did the great job on this. It looks good on various screen sizes. I will try to answer some of your issues.

    1. To make "main" div center, you need to give main container some kind of width. I would give max-width 1200px or something around that range and then change margin: 8-9rem auto and that should work. Play with it in dev tool in your browser!!

    2. Remove the min-width from card div and that will make it better.

    3)Once you have width(max-width) on your container then content box will adjust to it. I hope that is what you asking.

    Your code is easy to read but I would be caution using h2 before h1 for semantic reasons.You can do more research on semantic html and find out more about it.

    Best regards and keep coding, KT

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