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

simple website

K 10

@teerawxt

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I don't know yet how to merge the image and paragraph together and to make it responsive. but I keep learning more.

Community feedback

Trevor 200

@Tactenator

Posted

Hello!

I just finished this challenge myself, so hopefully I can help with your merging issue.

As the other comment says, try using flexbox. Flexbox makes it incredibly easy to merge items like this and make them look a lot neater. Using absolute positioning, in this case, is not necessary and is only making this challenge far more difficult than it needs to be.

Someone I can't recommend enough is NetNinja for learning anything you need to know about web development.

https://www.youtube.com/watch?v=Y8zMYaD1bz0&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG

Here is his series on flexbox. I hope it helps and happy coding!

0
pedro 30

@YKlK

Posted

bro, you can use flex and flex-direction: row;

display: flex; in order to use flex

flex-direction: row; to put them together 
justify-content: center; to center in the main axis
align-items: center; to center in the crox axis 

if you dont undertand feedback and i going to recomend you some videos

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