3 column card using HTML and CSS/Flexbox

Community feedback

• 

  Rayane•1,935

  @RayaneBengaouiPosted over 3 years ago

  Hello Tyler,

  Congrats for completing another challenge ! 🙂

  In addition to the great feedback of @tediko, I would suggest to add more padding to your buttons to match better the design and font-family: inherit to override the default font.

  Also, I would change the break point on the media query as the content overflow the screen between 500px and 1100px.

  Overall, well done for the challenge and happy coding ! 😃

  Have a nice day 🌞

  1

  ---

  

  Tyler•50

  @tylerthietjePosted over 3 years ago

  @RayaneBengaoui - Thank you for your suggestions above! I made the changes and now my site looks much better! Thank you for taking the time to help me out!

  0
• 

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  Hello, Tyler! 👋

  Add another div and wrap your .cointainer into that. Then to that new div add these styles, it'll center your container:

  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  

  After that, you have to remove styles from .container and make this element to be flexible.

  display: flex;
  flex-direction: row;
  max-width: 1110px;
  width: 100%;
  padding: 12px;
  

  Remove width from .panel element. And also remove margin-right: 200px; from .pic element because it causes your element isn't scalable.

  Now we have to work on media queries. Remove the currents one and add media query for 700px width for our new div and set align-items: unset;, then for .container for 700px width set:

  display: flex;
  flex-direction: column;
  align-items: center;
  

  and lastly add max-width: 360px; to your .panel.

  Good luck with that, have fun coding! 💪

  1

  ---

  

  Tyler•50

  @tylerthietjePosted over 3 years ago

  @tediko

  Sorry for the delayed reply! I was forced to be away from this site for a few days. I finally got back to this and applied the changes you recommended and they worked like a charm! My site looks just like I want it to now. Thank you for taking the time to help!

  0