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

3-column preview card component - Basic HTML/CSS using Grid & Flexbox

Axel 100

@meisteraxel

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello! :)

Any tips are appreciated! What should I do better next time? Struggled a little bit with the height Attribute of the body element because Content would cut off after changing from Rows to Columns in the Grid Container.

I do not have Pro, so the Design isn't 100% correct because i do not have access to the Figma Files.

Thanks in advance! Axel :)

Community feedback

P
cjdemille 480

@cjdemille

Posted

I actually don't think you need to set the height for your main container. I tested in dev tools without the height set and it works just fine without it (it also saves the headache of the content overflowing and needing to fiddle with a set height).

This looks great for mobile and desktop, but it does get cut off at screen sizes in between. Your first breakpoint is at 425px, but once it changes to the desktop layout it cuts off the outside portions of the outer boxes until the screen size is around 670px. You may want to consider changing that breakpoint, or working through a solution for that range.

Marked as helpful

0

Axel 100

@meisteraxel

Posted

Thank you! You are right it works better without the fixed height :) Also changed some styles to have a better responsive design now! @cjdemille

0
P
cjdemille 480

@cjdemille

Posted

@meisteraxel the updates look great!

1

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