Submitted almost 2 years ago

Four card feature section -- HTML, CSS (CSS Grid, media queries)

Benjamin• 70

@BenMK94

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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

Hassia Issah• 50,670

@Hassiai

Posted 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

Please log in to post a comment

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