Submitted about 2 years ago

Product preview card component try with flex

Simen Hagen• 90

@SimenHagen86

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

All feedback would be appreciated, struggled alot with the desktop view, also what parent etc to put flex on.

so any tips on layout is welcome

Community feedback

Pradeep Saini• 990

@pradeeps4ini

Posted about 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

Simen Hagen• 90

@SimenHagen86

Posted about 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.

Pradeep Saini• 990

@pradeeps4ini

Posted about 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.

Muhammad Bilal• 160

@mbilal-x

Posted about 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

Simen Hagen• 90

@SimenHagen86

Posted about 2 years ago

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

David• 8,000

@DavidMorgade

Posted about 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

Simen Hagen• 90

@SimenHagen86

Posted about 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

Please log in to post a comment

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