Kamczatka Kamczatka - 2 months ago 15
CSS Question

Inline-block new line

I have 4 elements in one row, each as inline-block. Im doing responsive website, so I want to move 2 elements to new line at some resolution. Because im using media-queries I need to do this in CSS. Does anyone know how solve this problem?

My code:
https://jsfiddle.net/451ouudn/

<div id="servicesPanel">
<div id="servicesContent" data-animate="fadeIn">
<h2>OFERTA</h2>
<span>Gwarantujemy najwyższą jakość w rozsądnych cenach! </span>
<div id="services">
<div class="item" id="face">KOSMETYKA TWARZY</div>
<div class="item" id="handsAndFeet">KOSMETYKA DŁONI I STÓP</div>
<div class="item" id="solarium">SOLARIUM</div>
<div class="item" id="hairdressing">FRYZJERSTWO</div>
</div>
</div>
</div>

Answer

for this you have to increase the width of item div in media query so that they will come in 2 lines. for example:

@media(max-width:1024px){
 .item{ width:49%;} 
}

here we give 49% width to each div.

Comments