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 preview column card with flexbox

@opakholis

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 totally forgot how center or align things without flex :)

Community feedback

bimalmagar 380

@bimalmagar10

Posted

Hey!You did great job building it and your build looks well! If you forgot about how we can center things wihtout flex then here's my reminder for you: -You can center text or inline elements using text-align:center -You can also center the block or inline block elements having a certain width with margin:0 auto -You can center any elements by posiitioning them like posiition:absolute top:50% left:50% and transform:translate(-50%,-50%).This is just a reminder for you.These values may differ with situations you are facing with.And also the element you're centering should be positioned with relative to its parents or any elements i.e they should contain the position:realtive code. This is all about what I know.I hope this may help and get you. Happy Coding!

2

@opakholis

Posted

hey @bimalmagar10 thank you very much. but you forgot one more thing, the grid. as an alternative if i'm bored with flexbox, which way to use it is with display: grid; and place-items: center;. I also often use it if it is necessary. happy coding. cheers!

0
bimalmagar 380

@bimalmagar10

Posted

@opxop Yeah!that's right. Thank you for reminding me.MEanwhile shorthand for align-items and justify-items i.e place-items is great.But just for centering the items, using grid is a bit weird isn't it?As it's more focused on two or more dimensional layouts.

Note:I like your photo and you're beautiful.Let's hook up in facebook if you don't mind 😉

0

@pikapikamart

Posted

Hey great work on this one. Both the desktop and mobile layout is good but a scrollbar appear at the bottom at point 900px going to 860px. It is not that apparent but a good notice right. So maybe adjusting the breakpoint will be really awesome for that small issue.

Looks really good and scales very well. Just here to say great job^

1

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