html5 - Why my responsive layout doesn't work? CSS issue, float: none; seems not be working -


i'm trying make layout responsive media queries, when scale down browser elements float left.

why float: none; not work here? right way of fixing it?

thank in advance.

.row { width: 100%; max-width: 940px; min-width: 320px; margin: 0 auto; } @media screen , (max-width: 960px) { .row { padding: 0 20px; } }  .row .row { min-width: 0px; } @media screen , (max-width: 960px) { .row .row { padding: 0; } }  .column, .columns { margin-left: 2.12766%; float: left; min-height: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }  .column:first-child, .columns:first-child, .alpha { margin-left: 0px; }  .row .six.columns { width: 48.93617%; margin-bottom:20px;}   @media screen , (max-width: 767px) { body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; }   .container { min-width: 0; margin-left: 0; margin-right: 0; }   .row { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }   .row .row .column, .row .row .columns { padding: 0; }   .row .centered { margin: 0 !important; }   .column, .columns { width: auto !important; float: none; margin-left: 0; margin-right: 0; }   .column:last-child, .columns:last-child { margin-right: 0; float: none; } 
<div class="row">             <div class="six columns inline">                 <div class="services-box services-box-animated">                     <div class="inner">                      <div class="front">                          <img src="img/evolution2.png" id="evolution"/>                           <h4>discovery</h4>                      </div>                      <div class="back">                           <p>whatever goes here.</p>                      </div>                     </div>                </div>         </div>              <div class="six columns inline">                     <div class="services-box services-box-animated">                     <div class="inner">                          <div class="front">                          <img src="img/evolution2.png" id="evolution"/>                           <h4>discovery</h4>                      </div>                      <div class="back">                           <p>whatever goes here.</p>                      </div>                     </div>                </div>             </div> <!--third div goes here-->              </div> 


Comments

Popular posts from this blog

php - Submit Form Data without Reloading page -

linux - Rails running on virtual machine in Windows -

php - $params->set Array between square bracket -