product-preview-card-component

Community feedback

• 

  Rajaul Islam Ratul•1,250

  @ratul0407Posted about 1 year ago

  @falloumacbook congratulations on completing this challenge🎉🎉

  To center your project or your product preview card you can do this:

  body {
  margin:0;
  display: flex;
  justify-content :center;
  align-items: center;
  min-height:100vh;
  }
  

  And remove the margin-left:400px from your .image and it will center the product card✌✌

  And one thing I want to point out is always wrap things inside of a container or a wrapper. The thing is, inside of your body there are two div's a main and a container you can wrap both of them inside of a main tag or maybe a div and then style them using flexbox or grid by doing this you're making your life a lot easier, styling things will become simple for you and then you don't have to use these weird margin numbers to make them align properly or to make them look as you want. You can achieve it with flexbox or grid and then set a max-width to your wrapper div to stop them growing to big and accomplishing the design.

  I hope this was helpful for you👍👍

  Happy coding brother🙂🙂

  Marked as helpful

  0
• 

  Nayan Bhatt•980

  @freaky4wrldPosted about 1 year ago

  Hey there, although you are starting out, but u know need to modify your solution a little bit!!!

  I think you have to do these changes:

  • wrap your image and text in a single div, then give that some width(percentage would be preferred) then give it a margin like this

  <div class="container">
            <div class='image-container'></div>
            <div class='text-container'></div>
  </div>
  

  .container{
           width: {value}%;
           margin: {value}rem/em/% auto; 
  }
  

  • similarly give some width in percentage to the image-container and text-container, without any margin!!!

  • try to give some font-size

  • also wrap your button inside the container element

  • lastly to make it responsive try using media queries you can refer here

  I hope this helps and solves your problem, try to modify it .....................

  I also recommend to checkout Brad Traversy

  Keep coding and hustling

  Marked as helpful

  0