Bam blocks, flexbox, grid, adaptive design

Community feedback

• 

  P

  Jocelyne Teles•180

  @JocelyneTeles98

  Posted 8 months ago

  Hello, @KristinaHorbenko!

  You did a great job! Referring to your difficulties, indeed it is difficult to arrange the cards as they are in the design. I want to share with you how I did and explain the logic a little bit. My solution might not be the best, but it serves as an idea:

  HTML: This part is the specific one of the cards. What I did here is to group the cards in the middle in the same <span> so I can put them together in the column of the middle (think about a grid with three columns and one row).

  <section>
        <div class="card" id="supervisor">
          <span>
            <h2>Supervisor</h2>
            <p>Monitors activity to identify project roadblocks</p>
          </span>
          <div class="image-container">
            <img src="images/icon-supervisor.svg" alt="supervisor icon" />
          </div>
        </div>
  
        <span class="middle-cards">
          <div class="card" id="team-builder">
            <span>
              <h2>Team Builder</h2>
              <p>Scans our talent network to create the optimal team for your project</p>
            </span>
            <div class="image-container">
              <img src="images/icon-team-builder.svg" alt="team builder icon" />
            </div>
          </div>
  
          <div class="card" id="karma">
            <span>
              <h2>Karma</h2>
              <p>Regularly evaluates our talent to ensure quality</p>
            </span>
            <div class="image-container">
              <img src="images/icon-karma.svg" alt="karma icon" />
            </div>
          </div>
        </span>
  
        <div class="card" id="calculator">
          <span>
            <h2>Calculator</h2>
            <p>Uses data from past projects to provide better delivery estimates</p>
          </span>
          <div class="image-container">
            <img src="images/icon-calculator.svg" alt="calculator icon" />
          </div>
        </div>
      </section>
  

  CSS Mobile: Here is how display the section in mobile screen sizes. This is simply a grid with one column .

  section {
      display: grid;
      row-gap: 1rem;
  }
  

  CSS Desktop: While in the desktop styles, I set this styles for the span of the cards in the middle to convert it a grid with one column. Then, the section is defined as a grid of 3 columns and the items are aligned to the centre.

  .middle-cards {
          display: grid;
          row-gap: 1rem;
  }
  section {
          align-items: center;
          grid-template-columns: repeat(3, 1fr);
          max-width: 80%;
  }
  

  I hope these examples of solution are helpful. They may not be the best because I'm learning too, but is something 😅 Happy coding! 😉

  00

  Marked as helpful
• 

  Khrystyna Horbenko•230

  @KristinaHorbenko

  Posted 8 months ago

  This is a very interesting solution, and I appreciate the approach you've taken. I would love to see more examples like this to gain more experience. Thank you!

  Could you please explain why you used a <span> tag in this case?

  00