Skip to content
Submitted 4 months ago

Product-Preview

Vinayak•300
@V102002
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

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

  • Babalola victor ayomide•390
    @ZHADOW999Posted 4 months ago

    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

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