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

CSS flexbox was used in this project

Leroy-samaā€¢ 280

@Leroy-sama

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


what's up guys, my solution has a small problem. I used align-items: stretch and the last button was offset. How can i fix this? I welcome your solutions to the problem.

Community feedback

Boots šŸ˜ŗā€¢ 1,590

@adityaphasu

Posted

Hi! Good Job on the challenge!

  • The button is offsetting due to the lack of content in the last div. See how the other box paragraphs wrap onto new lines while the the last box is missing a line hence the offsetting.
  • You can fix this by increasing the left and right padding of the content divs from 30px to 45px (45 seems fine as it matches the design but you can increase just so all the content divs have the same amount of paragraph lines). Something like this:
.content-1, .content-2, .content-3 {
padding: 30px 45px;
}
  • This should align the button with others.

šŸŽÆ Some things that might improve your code:

  • See how the button says "Learn More" , usually when a person clicks this they would be sent to a new page. Buttons are to be used for performing an in-page action and anchors/links are for navigating to a new page. So these should actually be anchor tags rather than button elements. No need to change much, just change the tags to <a> tags but dont forget to add display:inline-block to the css class because <a> tags are generally inline by default so the margins/paddings wont apply unless you change it into a inline-block element.

šŸ“± Instead of using a div as a container try using a semantic element like <main> tag like this:

<main class="container">
//rest of the code
</main>
  • The <main> tag provides a clear and meaningful structure to the HTML as it helps assistive technologies and search engines to understand the the main content of a document.Read more about it here!

šŸ–Šļø Instead of using absolute units like px for font sizes use relative units like rem for it. Try giving this blog a go to understand it better.

I hope this clarified your doubt and helped you gain some info about new things!

Keep growing and keep coding!šŸ™ŒšŸ»

Marked as helpful

0
Leroy-samaā€¢ 280

@Leroy-sama

Posted

Thanks a lot Aditya. I'll definately switch to semantic tags and learn more about rem units.

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