Skip to content
Submitted 4 months ago

Four Card Features Section

Stephanie Dennehy•220
@Stephanie-Dennehy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am really proud of the fact that I completed this project on my own using Tailwind CSS. This is the first project I have used it in (outside of tutorial videos). There were a few times that I got stuck and wanted to just go back to regular CSS, but I kept pushing through.

I do want to go back and clean up some of the classes a bit. I have several sections where I reused the CSS. I am thinking that I can make custom classes to apply so the HTML looks cleaner.

What challenges did you encounter, and how did you overcome them?

I had a hard time getting some of the layouts to shift correctly in my css. Since I was using tailwind for the first time on my own, I had to find which the specific items that I needed to change to get my layouts to work. It was a different experience for me than using plain CSS like I have in past projects.

I used a Tailwind Cheat sheet for quick reference on my class names to try to help me complete this challenge faster. You can find it here (https://tailwindcomponents.com/cheatsheet)

What specific areas of your project would you like help with?

I had a hard time getting the first and last card in the right positions. I used position absolute to move them but I was having a hard time getting my Tailwind classes to fully cooperate to adjust the spacing the way I wanted. I'd love to know if there's a better/easier way to do that part than the way I did it.

Community feedback

  • JaceLee•240
    @jaceleedevPosted 4 months ago

    Hello! First of all, I want to encourage you for taking on the challenge of learning Tailwind CSS and applying it to the challenge. It's clear from your code that you've put a lot of thought into tackling the challenges.

    First, when you go below the desktop view (under 1440px), the mobile view isn't centered properly. This issue arises because Tailwind prefers a mobile-first approach. When you define the values in the screens in tailwind.config.js(ts) simply as pixel values, it sets the default as min-width. If you want to set the default as max-width, you should modify it like this:

    screens: {
  sm: { max: '375px' },
  md: { max: '768px' },
  lg: { max: '1440px' }
}

    The card layout can be tricky and challenging. I recommend using CSS Grid for this. While it may not be the easiest solution, it works well if calculated correctly. Happy coding!

    Marked as helpful
    0

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