rui404 February 2016

Responsive Divs

So, I need a 3 or 4 collumn responsive div system. Reading some question here I found this snipet:

HTML:

<div class="core">
 <div class="box">
  <div class="text">Text</div>
 </div>
 <div class="box">
  <div class="text">Text</div>
 </div>
 <div class="box">
  <div class="text">Text</div>
 </div>
</div>

CSS:

.core {width: 100%; display: table; border-spacing: 10px;}

.box{
    background-color: coral;
    width: 32.03125%; 
    float:none;
    display: table-cell;
    border-radius:5px;
}
.text{
    padding: 10px;
    color:white;
    font-weight:bold;
    text-align:center;
}

wich is basically what I need and what I already have. The problem is when the with get's smaller I want it to get the blocks down, like a paragraph.

Instead of this:

enter image description here

I want this:

enter image description here

Answers


Raymon February 2016

Try this CSS:

.core {width: 100%; display: table; border-spacing: 10px;}

.box{
    background-color: coral;
    width: 100%; 
    float:none;
    display: table-row;
    border-radius:5px;
}
.text{
    padding: 10px;
    color:white;
    font-weight:bold;
    text-align:center;
}

The problem is when the with get's smaller I want it to get the blocks down

This link you found is not using any responsive frameworks. It's just simple CSS + HTML

Post Status

Asked in February 2016
Viewed 3,623 times
Voted 5
Answered 1 times

Search




Leave an answer