Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

four-card-feature

Louise 130

@atheenaoteyza

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@NatureSon22

Posted

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

@atheenaoteyza

Posted

@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
Discord logo

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