Stats Preview Card Component

Community feedback

• 

  _SabijaThor_•355

  @SasaVaticPosted about 3 years ago

  Hi Jenni, I've been playing with your solution a little bit and modified your code along the way and came up with more responsive solution. Your work is good 👏 I just added minor tweaks so you can try to implement it in your code and see what will happen. Keep in mind that in CSS there are many ways to came up with solution. Here are changes I adopted. Good 🤞 and keep 👩‍💻

  body

  • add display: flex; // here I used flex to position container to center of the screen
  • add justify-content: center;
  • add align-items: center;
  • add padding: 2rem;

  .container

  • add flex-direction: column-reverse; // flex reverse so that picture is on the top on smaller screens
  • add max-width: 900px; // container wont be larger than this size
  • add border-radius: 10px; // border radius for container
  • add overflow: hidden; // to hide image edges that are overflowing outside of the container
  • comment out position: absolute;
  • comment out top: 50%;
  • comment out left: 50%;
  • comment out transform: translate(-50%,-50%);

  .leftContainer

  • comment out flex-grow
  • comment out margin: 50px;
  • comment out padding: 0 25px;
  • add text-align: center; // align text on smaller screen to center
  • add padding: 50px; // when you want to make space between div and its content use padding, when you want to make space between two divs(blocks) use margin

  .rightContainer

  • comment out flex-grow

  .list

  • comment out justify content
  • add flex-direction: column; // use flex column to display items verticaly on smaller screens
  • add align-items: center; // align flex items along x axis to center
  • add gap: 2rem; // gap between items in flexbox

  img

  • comment out max-height: 100%;

  • comment out min-width: 100%;

  • add width: 100%; // set img width to 100% of parent element width in this case parent is rightContainer

  • add height: 100%; // set img height to 100% of parent element height in this case leftContainer

  • add media query for larger screens

  • @media screen and (min-width: 768px) {

  • .container {

  •    flex-direction:row; // on larger screens container should display right and left container horizontally so its row
    

    }

  • .leftContainer {

  •    text-align: left; // text in left container should be aligned left according to design files
    

  • width: 60%; // in this case 60% works fine because padding is pushing content inside 50px so we give content some space to breathe by setting width to 60% }

  • .list {

  •    flex-direction: row; // on larger screen list items should be displayed horizontally
    

    } }

  Marked as helpful

  1

  ---

  

  Jenni DeMuir Paquette•40

  @jennidemuirPosted about 3 years ago

  @SasaVatic Thank you! I really appreciate your comment and am excited to try out your suggestion.

  1