First Attempt - Product Preview

Community feedback

• 

  Victor Paumier•140

  @lifeaddiktPosted over 2 years ago

  Hello,

  First of all congratulations, really nice job :)

  I'm a beginner too but i can try to answer your questions.

  1. Yes you can also do it with grid. But flex works well here. (and maybe with a display inline?? dont know not a good practice i guess)

  2. The button goes outside the div cause of your max-height. Try to change your breakpoint to keep the same properties and cancel this behaviour or add another breakpoint with another max-height.

  Bye !

  Marked as helpful

  1

  ---

  

  Trevor•200

  @TactenatorPosted over 2 years ago

  @lifeaddikt

  Hello, Victor!

  Thank you very much! :)

  I will definitely be trying the grid trick! As for the button, I will give that a whirl as well and see what I come up.

  Thank you very much for the help! :)

  Take care!

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Trevor, congratulations for your solution!

  Answering your question:

  Another alternative to create this component, is using grid is even more simple than with flexbox.

  To build the component with 2 columns you can use max-width: 900px for the container size and display: flex and grid-template-column: 1fr 1fr for the layout this way you'll have the layout done. And the two divs inside will have 50% the parent size. To manage the column with text content use flex.

  To avoid the pricing section poping out of the container create a media query changing the price section flex-direction: column to have one text below the other.

  Hope it helps and happy coding! 👏

  Marked as helpful

  1

  ---

  

  Trevor•200

  @TactenatorPosted over 2 years ago

  @correlucas Hello again, Lucas! :)

  Ahhhh that's a neat trick with grid. I didn't even think about that. I'm going to definitely give that a try. As for the flex direction, I'll give that a try too and see how it goes.

  Thank you again for the sage wisdom. It truly does help!

  Take care!

  0