Four card feature section -- HTML, CSS (CSS Grid, media queries)
Design comparison
Solution retrospective
Centering [absolute]-ly positioned elements is unintuitive and difficult
Uncertain about the drop-shadow, particularly on mobile devices
I definitely could clean up the code in styles.css, particularly with regard to all of the columns.
I'm curious how others created this project--I get the feeling that conceptualizing the four cards as a 6x4 grid is fairly unique? CSS Grid was fun to use once I got the hang of it, however.
Community feedback
- @HassiaiPosted almost 2 years ago
Replace <h1 class="title-text-a"> with <p> give it a class for the styling.
To center .head-section on the page, give . text a width of 50% and give .head-section display: grid; place-items: center. e.g: .text{width:50%} .head-section{display: grid; place-items-center;} in the media query for the mobile design give .text a width of 100%.
Use the colors that were given in the style guide.md found the challenge file you downloaded. You forgot to give the body a background-color.
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
1
Please log in to post a comment
Log in with GitHub
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