Skip to content
Submitted 10 months ago

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

Axel•100
@meisteraxel
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

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

  • cjdemille•500
    @cjdemillePosted 10 months ago

    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
    @meisteraxelPosted 10 months ago

    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
    cjdemille•500
    @cjdemillePosted 10 months ago

    @meisteraxel the updates look great!

    1

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