Skip to content
Submitted 4 months ago

Four-Card Feature Section Layout

Ashutosh-Neupane•80
@Ashutosh-Neupane
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’m most proud of effectively aligning the card content with responsive design. Next time, I’d use display: grid for more precise control over layout and positioning.

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

The main challenge was aligning the image to the bottom and left side of the card. I overcame this by using CSS properties like position: absolute and adjusting margins, ensuring the image was correctly positioned within its container.

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

I would like help with creating a responsive layout using CSS Grid for better alignment and distribution of content.

Community feedback

  • AdamullaOsas•800
    @AdamullaOsasPosted 4 months ago

    Your mobile version looks great and I don't see any bad things about it. On desktop version CSS grid is way better option. Look up in my profile my code. I used grid, created 2 rows and 3 columns, and got 6 positions like this:

    1 | 2 | 3

    4 | 5 | 6

    Later I stretch out first box to take 1 and 4, and last item to take 3 and 6 positions and finally centered them and added gap. I am sure there is a lot of better solutions but mine works as well. I recommend to search for CSS grid and read articles about it or watch some films on youtube to better understand commands. I used CSS Grid Garden (little online game) and it helped me a lot. When you're finished adjust icons using position: absolute and maybe add some max-width to these cards.

    If you found that feedback useful, please mark it as helpful

    Good luck!!

    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