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.
How do I force my cards to be wider rather than higher while using grid-template-areas ?
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 !
You did the great job on this. It looks good on various screen sizes. I will try to answer some of your issues.
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!!
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.
I tried to apply "border radius" and "overflow-hidden" to main container for rounded corners but that did not work out in mobile layout. It didn't scroll down because of the overflow hidden so I ended up applying border radius to individual cards.
Anybody has done it differently? Is there a other way?
