raulbaros raulbaros - 1 month ago 9
HTML Question

Align boxes next to eachother and responsively

I am trying to have 6 boxes next to eachoter for lg. Then 4, then 3, then 2. I cannot figure out how to make the width for each box and also I cannot understand why the margins between the boxes are so big when I have 4 boxes next to eachother, also when 3 boxes and 2 boxes. How to make this code optimal for responsiveness where the left/right margins are always maybe 20px and the width of the box adjusts to the screen dimensions (now for small screens with 2 boxes together, the boxes overlap into eachother)? I tried flexbox but doesnot work for me. I would like to continue on the solution I have initiated as shown here already. Thanks.



.box2 {
margin: 5px 5px 5px 0;
text-align: center;
float: left;
background-color: yellow;
color: #000;
border: 5px solid blue;
height: auto;
width: 160px;
font-size: 12px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container overview-sm">
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a href="#" class="box2 dfs-alpha-sm" title="alpha">
<h1>Alpha</h1>
</a></div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a href="#" class="box2 dfs-beta-sm" title="beta">
<h1>Beta</h1>
</a></div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a href="#" class="box2 dfs-gamma-sm" title="gamma">
<h1>Gamma</h1>
</a></div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a href="#" class="box2 dfs-delta-sm" title="delta">
<h1>Delta</h1>
</a></div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a href="#" class="box2 dfs-omega-sm" title="omega">
<h1>Omega</h1>
</a></div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a href="#" class="box2 dfs-pie-sm" title="pie">
<h1>Pie</h1>
</a></div>
</div>
</div>




Answer

maybe this will help you

.box2 {
    width: 100%;
}

see ex below

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.box2 {
    margin: 5px 5px 5px 0;
    text-align: center;
    float: left;
    background-color: yellow;
    color: #000;
    border: 5px solid blue;
    height: auto;
    width: 100%;
    font-size: 12px;
}
<div class="container overview-sm">
      <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <a href="#" class="box2 dfs-alpha-sm" title="alpha">
          <h1>Alpha</h1>
			</a></div>
		  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <a href="#" class="box2 dfs-beta-sm" title="beta">
          <h1>Beta</h1>
        </a></div>
		  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <a href="#" class="box2 dfs-gamma-sm" title="gamma">
          <h1>Gamma</h1>
        </a></div>
		  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <a href="#" class="box2 dfs-delta-sm" title="delta">
          <h1>Delta</h1>
        </a></div>
		  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
        <a href="#" class="box2 dfs-omega-sm" title="omega">
          <h1>Omega</h1>
        </a></div>
		  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <a href="#" class="box2 dfs-pie-sm" title="pie">
          <h1>Pie</h1>
			  </a></div>
      </div>
    </div>

Comments