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 card component attempt

Salomon Levi• 60

@salolevi

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


I can't get the buttons on the desktop version to stay aligned when the text accomodates to resolution, any advice?

Community feedback

hardy• 3,660

@hardy333

Posted

Also in your .card-section element instead of using section tags use div tags you are using too many <section> tags in wrong places, semantic html elements are good but you need to use them at correct places...

Marked as helpful

1
hardy• 3,660

@hardy333

Posted

In order to make buttons stay aligned you can try this styles (as Robin Rowell already suggested):

.sedan-btn-container{
    margin-top: auto;
}

.card-section {
    padding: 25px 35px;
    text-align: left;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
}

Marked as helpful

1
Robin Rowell• 0

@robinrowell

Posted

Hi, I am new here so I am not sure where to view the source code. If the content in each card is using a flex layout with a flex-direction of column, then you can use a "margin-bottom: auto" on the next to last element to use any remaining space to distance itself from the last element. Hope that is helpful.

2

hardy• 3,660

@hardy333

Posted

@robinrowell Hi Robin. You can access source code in browser by pressing shrift + u key combination or you can access github repository by clicking "VIEW CODE" button which is right next to the "PREVIEW SITE" button.

Marked as helpful

1
Salomon Levi• 60

@salolevi

Posted

Thank you both! I will fix this asap.

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