Product preview card component try with flex

Community feedback

• 

  Pradeep Saini•990

  @pradeeps4iniPosted over 2 years ago

  Hey, @svimen86.

  To center the <span> in the price <p>, you can use the property "vertical-align: middle;" on the <span>.

  You should use <footer> for the footer of the page. <footer> is the semantic element to use to write HTML for footer of the page. It is better for readability and accessibility.

  Have fun working through more projects.:)

  Marked as helpful

  0

  ---

  

  Simen Hagen•90

  @SimenHagen86Posted over 2 years ago

  @pradeeps4ini Hi,

  Thanks for feedback and tip!

  just an follow up question, the footer - do you mean the "Challenge by Frontend Mentor. Coded by Your Name Here. " as an footer? since i am new to this i cant see any clear header / main / footer on this challenge.

  0

  

  Pradeep Saini•990

  @pradeeps4iniPosted over 2 years ago

  @svimen86. Yes, that's what i mean. You use <footer> element to wrap the content that should come at the bottom/foot of the page. These are semantic/landmark elements. You use them to provide scaffolding/structure to your page. You can learn more here...https://developer.mozilla.org/en-US/docs/Glossary/semantics.

  1
• 

  Muhammad Bilal•160

  @mbilal-xPosted over 2 years ago

  Hi Simen! I see you have used flex on the main tag. I what I did was to put flex on the body and then I used a div.panelContainer inside the body. so the div is now centered and I then put my image and text inside the .panelContainer [which also is a flexbox]

  Marked as helpful

  0

  ---

  

  Simen Hagen•90

  @SimenHagen86Posted over 2 years ago

  @mbilal-x Thanks for the tip, going to test it out when i redo it!

  0
• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hello and congrats for finishing the challenge!

  Regarding your question, for example in put prize and discounted prize, you can place the p and the span inside of a div and use display-flex there, with ´justify-content: space-between´ and align-items: center.

  Also I saw that you are using paddings and margins in all your elements of your right container, instead of that, use the padding in the parent element and adjust the content with flex to get the desired result!

  And finally, try using relative units (like % or rem) instead of absolute units like ems to get better and easier responsive layouts!

  Hope my feedback helps you, good job!

  Marked as helpful

  0

  ---

  

  Simen Hagen•90

  @SimenHagen86Posted over 2 years ago

  @DavidMorgade

  Thank you for your feedback and tips!

  yeah i tried putting it on .item but then all got pushed in ( including the picture :) will try to do as many challenges as i can and go back as i learn to do them over ( hopefully with better results)

  i will try with your tips to get it right! thanks again

  1