enter image description here

How to place the elements as shown in the screenshot. Sorry that without the sample code, I’ll just load it for a long time.

.expertice{ display: flex; justify-content: space-around; flex-flow: row wrap; padding: 45px 215px 0 190px ; height: 900px; } .icons{ display: flex; flex-direction: column; align-items: center; padding-top: 30px; min-width: 343px; height: 322px; } 
 <div class="expertice"> <h2>EXPERTISE</h2> <p>Lorem ipsum dolor sit amet proin gravida nibh vel velit</p> <div class="icons"> <img src="img/TV.png" alt=""> <h3>WEB DESIGN & DEVELOPMENT</h3> <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet Aenean.</p> </div> <div class="icons"> <img src="img/pan.png" alt=""> <h3>BRANDING IDENTITY</h3> <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet Aenean.</p> </div> <div class="icons"> <img src="img/phone.png" alt=""> <h3>MOBILE APP</h3> <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet Aenean.</p> </div> <div class="icons"> <img src="img/diagram.png" alt=""> <h3>SEARCH ENGINE OPTIMIZATION</h3> <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet Aenean.</p> </div> <div class="icons"> <img src="img/tetris.png" alt=""> <h3>GAME DEVELOPMENT</h3> <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet Aenean.</p> </div> <div class="icons"> <img src="img/heart.png" alt=""> <h3>MADE WITH LOVE</h3> <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet Aenean.</p> </div> </div>

  • @ MaksimLensky Added but not what has changed - BraFik

1 answer 1

I do not understand the problem .. this is what you need?

 i.fa { font-size: 4em; } .items { display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap; width: 80%; margin: auto; } .item { width: 30%; text-align: center; padding-top: 50px; padding-bottom: 10px; background: #fbfbfb; margin: 5px 0; } .name { flex: 0 0 100%; text-align: center; text-transform: uppercase; } p { font-size: 10px; } .item h3 { font-size: 10px; text-transform: uppercase; } .item p { width: 80%; margin: 6px auto; } @media (max-width:700px) { .items { flex-direction: space-between; } .item { width: 40%; } } @media (max-width:540px) { .items { flex-direction: space-between; } .item { width: 70%; min-width: 280px; } .item p { width: 70%; } .name p { font-siize: 14px; width: 80%; margin: auto; text-align: ; } } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="items"> <div class="name"> <h3>expertise</h3> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit</p> </div> <div class="item"> <i class="fa fa-television"></i> <h3>web design & development</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, temporibus.</p> </div> <div class="item"> <i class="fa fa-paint-brush"></i> <h3>BRANDING IDENTITY</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, temporibus.</p> </div> <div class="item"> <i class="fa fa-mobile"></i> <h3>SEARCH ENGINE OPTIMIZATION</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, temporibus.</p> </div> <div class="item"> <i class="fa fa-pie-chart"></i> <h3>GAME DEVELOPMENT</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, temporibus.</p> </div> <div class="item"> <i class="fa fa-heart-o"></i> <h3>MADE WITH LOVE</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, temporibus.</p> </div> <div class="item"> <i class="fa fa-tablet"></i> <h3>mobile app</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, temporibus.</p> </div> </div>

  • Wow, I'm just not quite sure about flex boxes. Thanks. - BraFik