I used flex for mobile mode and a grid for 1440px screen size.

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Timic! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉

  I have some suggestions for this solution.

  • Uppercase the text with CSS instead of manually uppercase the text in the HTML. The uppercased word in the HTML will be spelled by the screen reader (spelled letter by letter).
  • There's no need to have absolute positioning to position the card to the middle of the page. Instead, I would recommend adding justify-content: center; to the body element to center the card horizontally. Also, use min-height instead of hieght. Currently, on mobile landscape view the card is getting cut off on the top.
  • Adjust the breakpoint of the media query. It's too late to have a two columns layout on 1440px. Currently on my desktop view, 1280px * 800px, the card is so large. Just to let you know that, the sizes on the style-guide.md have nothing to do with the media queries. They are telling you that "this is how your website should look like at these screen sizes". As frontend developers, we should keep making your website looks good in between those screen sizes.

  That's it! Hope you find this useful! 😁

  Marked as helpful

  2
• 

  Sebastian•1,580

  @dnksebastianPosted over 2 years ago

  Hi,

  in order to easily center your card with flexbox, use 'justify-content: center' on your 'body' element and remove the 'position' and 'left' properties from 'card_container'.

  Hope this helps!

  Marked as helpful

  0
• 

  srglbrkchn•260

  @srglbrkchnPosted over 2 years ago

  Hi,

  How about :

  .card_container { margin: 10px auto; }

  10px does not matter, it's margin of top and bottom, you can set it to 0 if you wish. The auto, centers the card, it represents left and right margin. And then you can remove position: absolute and left property.

  Happy coding!

  1