Product Preview card

Community feedback

• Account deleted

  hi @Ramana-Giri, great work!

  I see that you are looking for some feedback so I can make some observations:

  • to avoid html issues, you shouldn't have a <p> tag inside the button, you can style that text directly by modifying the button code block

  • so that it is not complicated to create the mobile version of the component, you could work with what is called mobile first, it is a good practice and it makes many things easier for you, you sew in giving styles to the site for mobile and then work with media queries as you screen gets bigger

  • to center the card you can use two very common methods:

  .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  

  or

  .container {
    display: grid;
    place-items: center;
  }
  

  • I see a clean code, maybe you could use rem or em instead of px, and I encourage you to learn scss, a css microprocessor that makes many things easier when writing css code :)

  I hope this feedback has been useful to you! keep coding :)

  Marked as helpful

  1

  ---

  

  RG•30

  @Ramana-GiriPosted over 2 years ago

  Hey @nachogonzalia , Thank You for your Feedback. Your feedback helped me a lot and helped me realise that my understanding on centring the content in center with flex model is wrong and learnt the proper way. I will definitely try to develop a mobile first version on my next project and your other suggestions. Your feedback was really helpful. Thank you again 😊

  0

  

  RG•30

  @Ramana-GiriPosted over 2 years ago

  Hey @nachogonzalia , Thank You for your Feedback. Your feedback helped me a lot and helped me realise that my understanding on centring the content in center with flex model is wrong and learnt the proper way. I will definitely try to develop a mobile first version on my next project and your other suggestions. Your feedback was really helpful. Thank you again 😊

  1

  Account deleted

  @Ramana-Giri your way of centering the components isn't wrong! I use the margin to position this type of components, since the solution that frontend mentor offers us isn't always centered, the solution that I gave you, however, centers them completely :)

  0

  

  RG•30

  @Ramana-GiriPosted over 2 years ago

  @nachogonzalia I learnt the flex method to centre but it never worked for me since I always add the code under Body element,Now I understood that I have to add the codes to the element which I want it to be in centre.

  I have changed the <p> tag into <span>, Is there any other issues now ?

  1

  Account deleted

  @Ramana-Giri yes! you should be delete the <span> tag and keep the text inside only the button tag, you can styling the text modifying it in the button code block like that:

  .button {
    font-size: 10px;
  }
  

  0