@ccreusat
Posted
Hey!
Some quick fixes:
- don't use height: 100vh on the <body> but min-height:100vh. I did the same mistake on a challenge but it won't break your design :)
- don't use # to style your components (ex:id="dark"), use .dark because you can't have the same ID in your DOM. (Look the HTML issues in your report)
- I would give your Grid Container more control to have a more fluid layout (no fixed width but max-width:1080px; grid-template-rows: auto; to avoid break rows) and I would play with margin-left/right when necessary (mobile for example).
Hope it helps :)
Marked as helpful
@ccreusat thanks for the suggestions.I'm always had some problem in setting up the heigth for the body.So i blindly set the heigth to 100vh to use display:flex;align-items: center.Can use suggests some better method to set the height and width of the container(i.e vh or percentage or px)?
@ccreusat
Posted
@Badhrikr with the min-height: 100vh (could be 100%), will work like a charm!
Marked as helpful