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

3column-preview-card with HTML&CSS

@AyaElmancy

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


some support here please.

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Hey, Aya!

Try not using "position: absolute" in this case. It makes the content leak from the parent containers. When you set position absolute like that, the item will simply ignore limits and that leak can happen.

In this project, you don't even need to use the property "position". You can solve this challenge with flexbox, margins and paddings.

Hope it helps!

Marked as helpful

0

@AyaElmancy

Posted

I don’t Know flex box yet I am still learning. @danielmrz-dev Thanks I will next time

1
Daniel 🛸 44,230

@danielmrz-dev

Posted

@AyaElmancy

You're gonna like flexbox. It's not hard and will help you a lot with projects like this.

I'm gonna keep track of your projects so I can help you ;)

Marked as helpful

0

@AyaElmancy

Posted

Thanks so much . @danielmrz-dev

1

@Marley-Semende

Posted

okay that’s great to hear. If you go below your solution there is a line that says “Design Comparison “, below it you can see a red button that says “Generate New Screenshot”. It allows you to generate a new screenshot for your code updates:)

Marked as helpful

0

@AyaElmancy

Posted

I do that but the same screenshot appear no problem important to me that l made it correctly thanks for your help @Marley-Semende

0

@Marley-Semende

Posted

Good job overall !! you can also add margins to your card containers to position your elements for example adding a margin to your buttons will make your buttons go a little more inside the card containers, and you can also try text-align: center; to center your text within the container. I hope this helps.

0

@AyaElmancy

Posted

thanks @Marley-Semende i already put buttons in their correct position and take screenshot for them but i do not know why screenshot appear not correct.

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