QR Code Component

Community feedback

• 

  Ivan Olmo•310

  @ivanolmoPosted over 2 years ago

  You can center your main card very easily using flexbox. For example, you have text-align on your body, but that should only be used to align text, not elements/containers. You don't necessarily need the margin-top on your .container either. Instead you can do:

  body {
    display: flex;
    justify-content: center; /* this will center the card horizontally */
    align-items: center; /* this will center the card vertically */
  }
  

  You can do similar code with your .container to center your img and main div, and also with your .text-box to center your h2 and p, like this:

  .container,
  .text-box {
    display: flex;
    flex-direction: column;
    align-items: center; /* this will align your flex items (img and div) horizontally inside your card */
  }
    
  

  The vertical spacing between elements on your card can be accomplished with flex gap or with margins. For example, your .text-box has a margin-top of 30px, and that works to space it from your img, but the same can be accomplished by setting gap: 30px if your .text-box was a flex container.

  You'd only want to use text-align to center align your actual text within it's containing element, such as the text inside your h2 and p.

  Here is how I'd change your CSS, with comments:

  * {
          margin: 0;
          padding: 0;
        }
        body {
          background-color: hsl(212, 45%, 89%);
          /* text-align: center; <--- remove this */
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100vh; /* add this so body will take up the entire viewport */
        }
  
        .container {
          /* display: inline-block;  <--- remove this */
          display: flex;
          flex-direction: column; /* the card flows vertically, so use column */
          align-items: center; /* will center img and .text-box horizontally */
          background-color: #fff;
          padding: 20px;
          font-family: 'Outfit', sans-serif;
          padding-bottom: 40px;
          /* text-align: center;  <--- remove this, instead apply it to elements that have text inside */
          border-radius: 4%;
          box-shadow: 3px 3px 20px 2px rgba(0, 0, 0, 0.1);
          /* margin-top: 50px;  <--- remove this, flex will position the card */
        }
  
        .container img {
          border-radius: 4%;
          width: 325px;
        }
  
        .text-box {
          margin-top: 30px; /* <--- doesn't necessarily have to be removed, but you can use flex gap on the parent container instead */
          /* text-align: center;  <--- remove this, instead apply it to elements that have text inside */
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 20px; /* instead of giving your h2 padding-bottom, give the flex container 20px gap instead to accomplish the same thing */
        }
  
        /* h2 and p are now centered by flex box */
        .text-box h2 {
          /* padding-bottom: 20px;  <--- remove this, replaced with gap above */
          text-align: none; /* now add this to center the text within it's own container */
        }
  
        .text-box p {
          color: hsl(220, 15%, 55%);
          font-size: 15px;
          text-align: center; /* now add this to center the text within it's own container */
        }
  

  Marked as helpful

  2

  ---

  

  Aarón Jiménez•50

  @Vonka-hubPosted over 2 years ago

  @ivanolmo Thanks a lot! I'll dive more into flex, i really appreciate your feedback.

  0