Make float none is not working

Question

Make float none is not working

Navigation

#1 by (0 votes)

1

I have the following form:

  <form id="formFrete" action="?" method="post">
    <input type="hidden" name="acao" value="calculaFrete" />
    <div style="float:left;">
      <label class="labelPequeno">CEP:</label>
      <input pattern="[0-9]{2}[.][0-9]{3}[-][0-9]{3}" type="text" class="typeTextPequeno" id="cep" name="cep" value="<?php echo $cep; ?>" required />
    </div>
    <div style="float:left; width:10px;">&nbsp;</div>
    <div style="float:left;">
      <input type="submit" value="Calcular Frete" class="btnPesquisa" />
      <a href="http://www.buscacep.correios.com.br/sistemas/buscacep/" target="_blank">Não sei o CEP</a> </div>
  </form>

It looks like this:

Butwhenforresolutionsbelow%with%inclusive,Iwouldlike860pxbotõesand"Calcular Frete" to behave as "Não sei o cep" .

I'm doing this:

@media screen and (min-width: 0px) and (max-width:860px) {
 form#formFrete div {
     float:none;
 }
}

Where am I going wrong?

css css3

asked by anonymous 17.10.2016 / 16:44

1 answer

Api Facebook live streaming How can an external swf access the stage within the document class?

score 0 · Answer 1

The problem in this case is the precedence of styles defined in different places or shapes, I explain how the browser decides which style takes precedence # if you want to check out.

Basically because you have declared inline styles, by using the style attribute that takes precedence greater than styles defined by css your rule is ignored.

The simple solution would be to use !important in your css to force the browser to apply the rules, however the best solution would be to not use the style attribute and do everything by css

form#formFrete div {
    float:left;
}    

@media screen and (min-width: 0px) and (max-width:860px) {
    form#formFrete div {
        float:none;
    }
}

In this way I could remove the float:left that was inline in html, and as the rules in css are applied in the order they are in the file it will first apply float:left , but if the screen is less than 860px it will replace the rule with float:none