3 column preview card component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Greetings, Kristin! 👋

  It's actually already pretty responsive. You can do the following to make it fully responsive.

  • First, I recommend making the body element as a flex container to center the card. This way, you can remove the position: fixed and the other things from the main element. (note: remove the commented code)

  body {
      background-color: hsl(0, 0%, 95%);
      font-family: 'Lexend Deca', sans-serif;
      font-weight: 400;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
  }
  
  main {
      /* width: 920px; */
      /* text-align: left; */
      /* display: flex; */
      /* position: fixed; */
      /* left: 50%; */
      /* top: 50%; */
      /* transform: translate(-50%, -50%); */
      max-width: 920px;
      display: flex;
  }
  

  • After that, you can add some padding to the body element to prevent the card from touching the browser's edges.
  • Fix the attribution styling by removing the position: fixed.

  .attribution {
      font-size: 11px;
      /* position: fixed; */
      /* left: 50%; */
      /* transform: translate(-50%); */
      /* bottom: 10px; */
  }
  

  • Once you do that, the layout will start broken. But, we can fix that by setting flex-direction: column on the body element.
  • Lastly, you can add some margin-top on the attribution element to give some white space between the card element.

  Now, the site should be responsive. But, I want to give you another recommendation. I recommend writing the styling with the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.

  So, the initial or the base styling would be for the mobile layout first. After that, instead of using max-width media query, you will be often using min-width media query instead. This way, there's no need for these lines of code.

  @media (max-width: 920px) {
      main {
          display: unset;
          position: unset;
          left: unset;
      }
  }
  

  Hope this helps. 😊

  Marked as helpful

  1

  ---

  

  Kristin Brooks•40

  @kristinbrooksPosted over 2 years ago

  @vanzasetia Thank you so much! It helped A LOT. I was trying to add in align-items and justify-content last night but I wasn't deleting all of all the right things from my code to get it to work right. Now it's all good. When I was looking up how to do media queries for this I read that mobile first is often a better way to go. I'm going to do my next one that way. Thanks again!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @kristinbrooks No problem! I am glad to know that my feedback helped you! 😄

  Good luck with your next challenge! 👍

  0
• 

  Adrian•550

  @SirMeierLinkPosted over 2 years ago

  Hello Kristin,

  Using display: flex-box;

  justify-content: center; /* to center the items horizontally on the main-axis */
  
  align-items: center; /* to center the items vertically on the cross-axis */
  

  That would made centering your project in the center of the page. In your media query of max-width: 920px, you could use "flex-direction: column" to stack the items on top of each other.

  You did well on not having any accessibility and html issues. Congrats!

  Happy Coding!!! 👍

  Marked as helpful

  0