Desktop version, flexbox.

Community feedback

• 

  Daniel Chettiar•140

  @dannyboi07Posted almost 3 years ago

  You should look into what media queries are in css and responsive web design (this is a concept in frontend web dev).

  Media queries are how you set different versions of a layout for different screen sizes.

  https://www.w3schools.com/css/css_rwd_mediaqueries.asp

  https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

  Best links for you to get up and running with basic media queries.

  1
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hay ! Good Job you made it look nearly perfect to the preview

  -> use the border radius property in "wrapper" i think and add " overflow: hidden;"to it to view the border radius near img edges

  -> And yes put this to center the whole card

  .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }

  Keep up the good work!

  1

  ---

  

  Dennis Race•50

  @D-RacePosted almost 3 years ago

  @Crazimonk Awesome. Border radius is now fixed. Thanks

  1
• 

  Aadvik•1,250

  @Aadv1kPosted almost 3 years ago

  To center the container both vertically and horizontally over the body you should use absolute positioning; like so --

  .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
  }
  

  This pushes your element below and left by 50% and then of-sets it via transform. To make it work for mobile you can use flex-direction: column to make it vertical. If you need more help, you can reach me out via twitter or mail.

  1

  ---

  

  Dennis Race•50

  @D-RacePosted almost 3 years ago

  @Aadv1k Thanks for the advice. It worked perfectly. Only issue I am seeing now is the design has a taller height than mine does. Where can I start to fix this issue? Could you explain the mobile issue a bit?

  0

  

  Nícolas Gabriel•140

  @Nick-GabePosted almost 3 years ago

  @Aadv1k Oh, that's really useful! I was using flex but it works optimal with position absolute, thanks

  0

  

  Aadvik•1,250

  @Aadv1kPosted almost 3 years ago

  @Dennis-Race Hey dennis, there is no way to get get the actual height identical to the one in the photos, you can only apply padding on the elements to make them appear taller.

  0