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

Product-Preview

Vinayak 300

@V102002

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


What are you most proud of, and what would you do differently next time?

I finished in an hour

What challenges did you encounter, and how did you overcome them?

I came across a problem when I made a live site, the alignment was off

What specific areas of your project would you like help with?

Please give feedback on how to get it better

Community feedback

@ZHADOW999

Posted

Firstly remove the margin left on the container and put margin:auto; to center it

The card at 500px screen size set the width to 85%

The button at 500px screen size set the width to be 90% and add margin:auto;

The container at 500px screen size remove the height:1000px and set the height to height:auto,

So these are the correction i made to make it better

If you wanna center elements in a container, set the container to 100% or any size of your choice and set the elements in the container to like 90% or any size of your choice and put margin:auto;

Adding auto on width or height means adding width or height based on the amount of element in the container it' really helpful

i hope this helps you, happy coding 😁👌 !

Marked as helpful

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