Witam, mam pytanie jak ustawić w queries.css te 4 kolumny tak aby były zaraz pod sobą a nie obok siebie?
Przy rozdzielczości 481px i mniej kolumny automatycznie się ustawiają pod sobą, a chcę żeby to działo się już przy schodzeniu 767px i niżej.
<div class="row">
<div class="col span-1-of-4">
<div>
<div class="step">
1
</div>
</div>
<div class="plan-box">
<div>
<h3>Oblicz swoje zapotrzebowanie kaloryczne</h3>
</div>
<div class="mid-div">
<p><ion-icon class="mini-icon" name="calculator"></ion-icon>Znając całkowitą liczbę kalorii, do jakiej powinniśmy codziennie dążyć, z łatwością zaplanujemy swoje posiłki i uzyskamy kontrolę nad zdrowym żywieniem.</p>
</div>
<div>
<a href="kalkulator.html" class="btn-ghost">Kalkulator kalorii</a>
</div>
</div>
</div>
<div class="col span-1-of-4">
<div>
<div class="step">
2
</div>
</div>
<div class="plan-box">
<div>
<h3>Wybierz dietę dopasowaną do Ciebie</h3>
</div>
<div class="mid-div">
<p><ion-icon class="mini-icon" name="heart"></ion-icon>Znajdziesz u nas odpowiednio zbilansowaną dietę, dostosowaną pod Twój własny styl życia</p>
</div>
<div>
<a href="diety.html" class="btn-ghost">Diety</a>
</div>
</div>
</div>
<div class="col span-1-of-4">
<div>
<div class="step">
3
</div>
</div>
<div class="plan-box">
<div>
<h3>Składasz zamówienie</h3>
</div>
<div class="mid-div">
<p><ion-icon class="mini-icon" name="pricetag"></ion-icon>Zamówienie złożysz <br/>u nas szybko i sprawnie</p>
</div>
<div>
<a href="cennik.html" class="btn-ghost">Sprawdź cennik</a>
</div>
</div>
</div>
<div class="col span-1-of-4">
<div>
<div class="step">
4
</div>
</div>
<div class="plan-box">
<div>
<h3>i...gotowe!</h3>
</div>
<div class="mid-div">
<p><ion-icon class="mini-icon" name="car"></ion-icon>Zamówione jedzenie nasz dostawca zawiezie prosto pod Twoje drzwi!</p>
</div>
<div>
<a href="zamow.html" class="btn-ghost">Złóż zamówienie</a>
</div>
</div>
</div>
</div>
.plan-box{
background-color: #fff;
font-size: 90%;
border-radius: 5px;
box-shadow: 0 2px 10px #4d4d4d;
height: 380px;
background-color: rgba(255, 255, 255, 0);
}
.plan-box div{
padding:15px;
border-bottom: 1px solid rgba(36, 216, 119, 0.26);
}
.plan-box div:first-child{
height:118px;
}
.plan-box div h3{
margin:0;
font-weight: 200;
}
.mid-div{
height:178px;
}
.plan-box div p{
font-size: 90%;
}
.plan-box div:last-child{
text-align: center;
border:0;
}
.step{
color: #12a053;
border: 2px solid #12a053;
border-radius: 50%;
height: 54px;
width: 54px;
text-align: center;
padding: 5px;
font-size: 150%;
margin-left: 35%;
margin-bottom: 5%
}
/* ///////////// BUTTONY DO SEKCJI JAK TO DZIALA + btn "Oblicz" ///////////////////////*/
.btn-ghost:link,
.btn-ghost:visited{
text-decoration: none;
border: 1px solid #12a053;
color: #12a053;
border-radius: 200px;
display: inline-block;
padding:10px 20px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
}
.btn-ghost:hover,
.btn-ghost:active{
color:#fff;
background-color: #12a053;
}
.mini-icon{
color:#12a053;
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
I tutaj moje próby z queries.css
@media only screen and (max-width: 767px){
.col{
width:100%;
}
.span-1-of-4{
width:0%;
}
.row{
padding: 0 4%;
}
}
i tutaj plik z grid.css
.row {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.row:before,
.row:after {
content:"";
display:table;
}
.row:after {
clear:both;
}
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
@media only screen and (max-width: 480px) {
.col {
/*margin: 1% 0 1% 0%;*/
margin: 0;
}
}