Brett

Latest comments

• 

  Adolf Schmuck•10

  @answebdev

  Submitted almost 3 years ago

  

  QR Code Component

  2

  40
  

  Brett•60

  @b-capra

  Posted almost 3 years ago

  Have you tried using flexbox to align the items in the card? The media query approach you used utilizes a lot of different paddings, and using padding as your primary means of aligning and laying out items can get a bit difficult as you've probably encountered here.

  Using properties that are more suited to layout, like flexbox or grid, can help. For example, in my solution for this same challenge, I used these properties on my div containing all the items on the component:

  div { display: flex; flex-direction: column; align-items: center; justify-content: space-between; }

  From there, all I needed to do was adjust the top/bottom margins of the elements within the card to get them in the right position.

  You can see that code in my solution here: https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H/hub/qr-code-component-using-css-flexbox-2chPVWJdcF

  Hope this helps!

  0