'Stats page using flexbox

Community feedback

• 

  Muhammad Saad•280

  @Arman001Posted about 1 year ago

  Hi! Good Work there... Your problem was the usage of an extra div this is where i removed the extra div and changed class .remove_padding to .card_content. I also removed the top div but you can add it if you want but then it will be consider as a single element unlike separate h1 and p.

  <div class="card-container">
            <div class="card-content">
                <h1>Get <span>insights</span> that help your business grow.</h1>
  
                <p>
                  Discover the benefits of data analytics and make better
                  decisions regarding revenue, customer experience, and overall
                  efficiency.
                </p>
  
              <div class="flex-container stats">
                <div class="stats-one">
                  <h2>10k+</h2>
                  <p class="stats-p">companies</p>
                </div>
  
                <div class="stats-two">
                  <h2>314</h2>
                  <p class="stats-p">templates</p>
                </div>
  
                <div class="stats-three">
                  <h2>12m+</h2>
                  <p class="stats-p">queries</p>
                </div>
              </div>
              
            </div>
          
          
          <div class="p-flex-item part-two">
            <img src="./images/image-header-desktop.jpg" class="image" ; />
          </div>
        </div>
  

  CSS is of .card-content and image is as follow where i changed flex:1; because it will give equal size both to image and .card-content.

  .image {
    width: 100%;
    height: 100%;
    flex: 1;
  
  }
  
  .card-content {
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
  }
  

  You can also check my solution here GitHub Link. I hope this will be helpful for you.

  Regards #SAAD

  0
• 

  danemaas•520

  @danemaasPosted about 1 year ago

  uhm i think the problem in your .for-padding was the height wasn't enough for it to do a justify-content. you can declare the height to 100% first then your justify content will work. hope this can help.

  0