Kamczatka Kamczatka - 10 months ago 70
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:

<div id="servicesPanel">
<div id="servicesContent" data-animate="fadeIn">
<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>

Answer Source

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

 .item{ width:49%;} 

here we give 49% width to each div.