Skip to content
Submitted almost 2 years ago

3-column preview card using flexbox

MeghaS4831•30
@MeghaS4831
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi All,

I started building this project with mobile first approach. I used CSS flexbox to align the elements. However, as I progressed with my code the layout for Website design ended up getting distorted and when I fixed that, the mobile layout is not working in the current solution.

For instance, if I remove the following CSS code, then I get the <div> elements stacked on top of each other in mobile layout.

.row{ display: flex; justify-content: center; }

But then it brings the <div> elements to the left and I am not able to come up with an efficient solution to center them. I also used Margin property, but then it doesn't go well with screen changes.

Could anyone help me understand where I am going wrong? Many thanks!

Code

Please log in to post a comment

Log in

Community feedback

  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    CSS 🎨:

    • Looks like you haven't declared the transparent background color for each a (Learn more) elements which needs to be change the background color during the hover, actually we can handle that issue with a css color function named rgba()
    • The rgba() function define colors using the Red-green-blue-alpha (RGBA) model. RGBA color values are an extension of RGB color values with an alpha channel, which helps us to take control over the opacity of the color.
    • So just add rgba(0,0,0,0) for the button elements during hover
    • Let's look an example
    a:hover {
background-color: rgba(0,0,0,0);
color: white;
outline: 1px solid white;
}
    • Now you have gotten the desired result without hassling in an efficient way.
    • Pro tip: you can use transparent value for background property to get the same effect as rgba(0,0,0,0) but using rgba provides more granular control over the color correction.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

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