All solutions

• 

  Blog preview card using flexbox

  ---

  

  Aiden•20

  Submitted 5 months ago

  I find it very complicated to set up the right width for my image based on the figma design file. Perhaps, I used incorrect width elements or was wrong with the sizing that I have set on the image itself, not sure. I'm still in the process of improving the solution, refactoring in other words, to make it look much cleaner.

  ---

  2 comments0 likes
• 

  QR code component using CSS Flexbox

  ---

  

  Aiden•20

  Submitted 6 months ago

  First of all, I'd love to hear experitise opinion regarding the CSS reset, more specifically box-sizing: border-box;. I noticed that it shrinks the component a little bit, so I decided to comment it out for now. Please advise!

  This is my very first solution on this platform plus I have zero experience working with Figma, so I'd also love to find out if my min-width: 288px; and max-width: 288px; on generic .container have place to be as a workaround.

  Regarding the .container: I started to overthink a lot, and made my .container extremely large in terms of attributes inside, so I can't really call it generic afterwards. As far as I know, there should be only width, max-width, and margin: 0 auto;. Should I just make another div inside the .container where I would include things like box-shadow, border-radius and background, or just make an additional class and append to existing div?

  Image tag <img>: Is it a good practice to have my <img> wrapped inside separate div? Or it just depends how I implement flexbox to such things if I were to use it on this specific image? Also, I've added a fixed height: 288px; and width: 288px; to the qr code image, but I'm very unsure if that's proper way of doing that. Please help!

  Lastly, margin on .qr-title in em units. When I do 1.5em for margin-top, it shows as 33px, not 24px in Dev Tools, but when I do it in px instead of ems everything fine in Dev Tools. Any ideas on why this is happening?

  ---

  1 comment0 likes