Skip to content
Submitted 6 months ago

four-card-feature

Louise•130
@atheenaoteyza
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?

was able to use grid and place items by what nth line it is (n/n)

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

probably the the sizing and how will I put the positioning in grid, made a drawing in paint and realized I could position the box in between two grids by making four grids and putting in middle lines

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

just tell me where I can improve on I'll take all :-)

Community feedback

  • Nature Son•1,100
    @NatureSon22Posted 6 months ago

    On smaller screen sizes, the layout collapses. Try setting the <body> element to have min-height: 100vh, which ensures the body takes up at least the full height of the viewport. Additionally, set the <main> element to have a max-width instead of a fixed width. This allows the main content to adjust within the maximum limit making it more responsive to varying screen sizes.

    Marked as helpful
    1
    Louise•130
    @atheenaoteyzaPosted 6 months ago

    @NatureSon22 hey thanks for the advise did it already and thanks for noticing! I updated the height beforehand then forgot about checking the mobile view haha

    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