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 preview card using flexbox

@MeghaS4831

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


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!

Community feedback

@0xabdulkhaliq

Posted

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!

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