Pictures won't fit in the row

user_10661295 0
Viewed 538

Picture wont fit in the same row as. It will all fit if its the same picture. I've tried reducing the width of the pictures but it doesn't seem to work. Must I make the pictures smaller?

picture of the problem -https://i.stack.imgur.com/3E9zo.png

Html

 <section class="section-team" id="team">
    <div class="row">
       <h2>team members</h2>    
    </div>
  <div class="column-4">
    <img src="img/Picture1.jpg" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
   <div class="column-4">
    <img src="img/Picture1.jpg" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
   <div class="column-4">
    <img src="img/Picture1.jpg" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
   <div class="column-4">
    <img src="img/Picture1.jpg"  class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
   <div class="column-4">
    <img src="img/Picture1.jpg" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
   <div class="column-4">
    <img src="img/Picture1.jpg" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
    <div class="column-12">
    <img src="img/upm.jpg" class="upm" alt="upm" style="width:20%">
    <h4>In partnership with  Upm</h4>
  </div>       
</section>

Css

.row {
    max-width: 1140px;
    margin: 0 auto;
}

.column-4 {
  float: left;
  box-sizing: border-box; 
  width: 33.3%; 
  display: inline-block;
  padding: 5px;
  padding-right: 30px;
}

.column-12 { 
  float: right; 
  box-sizing: border-box; 
  width: 100%; 
  display: inline-block;
  padding: 5px; 
  padding-right: 30px;
}

.section-team{
    text-align: center;
    clear:both;
}

.members{
    border-radius: 50%;
}

.upm {
  float: right ; 
  padding-top: 2px;

}

I hope someone can show how to make the pictures fit

css html
4 Answers

Using flex is the probably the best and easiest solution for your problem. You can do that by declaring:

display:flex;

In the container of the photos. In your current HTML, it had to be added to the section tag. What flex will do, is to "force" every element to be in the same row. As it is implicit that the flex-direction property, is set to row.

user_111027920
user_46008590

This is a classic grid system, better to use Bootstrap to get perfect grids. Using boostrap

<div class="row">
  <div class="col-4">place your image here</div>
  <div class="col-4">place your image here</div>
  <div class="col-4">place your image here</div>
  <div class="col-4">place your image here</div>
</div>
user_113096090

Please check this part of code

    <div class="column-12">
      <img src="img/upm.jpg" class="upm" alt="upm" style="width:20%">
      <h4>In partnership with  Upm</h4>
    </div>

'column-12' occupies all the space in row. Above for all images you are using 'column-4'. Or Use Bootstrap

user_42184270
Related