Skip to content
Submitted 6 months ago

Four Card Feature Section Layout

jaiden-lee•90
@jaiden-lee
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am most proud of actually getting the four card system to work properly. This was the first time that I had used CSS grid successfully.

What challenges did you encounter, and how did you overcome them?

I struggled with the position of the image. I struggled with getting the image to align with the bottom. Normally, in the mobile layout, since it was vertical, the height was determined completely by the content/where the image was, so the image was at the bottom. However, when I used a media query and changed the grid layout, the heights of all the cards were equal, rather than auto. So, to make everything at the bottom, I used margin-top: auto.

What specific areas of your project would you like help with?

There isn't anything I would like help in.

Community feedback

  • Ralph Virtucio•670
    @ralphvirtucioPosted 6 months ago

    Hi Jaiden Lee, Great job on completing this challenge!

    Here are my feedbacks to your challenge:

    1. It's not a good practice to have two <h1></h1> tag element in your HTML, I'd suggest making the other heading a <h2></h2>

    2. If your struggling on positioning the image, I'd suggest wrap the image in the div element, set a align-self property with a value of flex-end to the div selector.

    3. Try using rem or em for your max-width and media-query. This will improve responsiveness of the page because rem and em are relative units they scale with the user's font size settings.

    4. I'd suggest to remove the property text-align in your .site-container and move it to each content that you want to have the text centered. Setting a text-align: center in the parent div will cause everything to be centered. That's the reason that the text in your card are also centered.

    ** HAPPY CODING 🧑‍💻🧑‍💻 CODE UP ☕☕☕**

    0
  • Bananas•80
    @johntmeachamPosted 6 months ago

    I like the way you used grid, I used flexbox but knew grid would be better but I'm not good with grid yet. Nice job. Sorry not much constructive criticism as I am new to css.

    0

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