Display div elsewhere, according to screen resolution

Navigation
2

Would you like to give a different include for each resolution? Like ...

If the resolution (width) is greater than 768 I want to display 2 columns (grid_6 and grid_6), opening the text next, ok.

Butifitisalessresolution,Iwanttodisplayonlyonecolumn(grid_12)byopeningthetextbeloweachclickedelement,notattheendofeverythingasitcurrentlyoccurs.

HowcanIdothis?obs:eachfunnelelementisaseparatedivwiththeimage.

followmycode:

<script>functionfunil(el){$('#img_funil_1').css("-webkit-filter", "grayscale(70%)");
        $('#img_funil_2').css("-webkit-filter", "grayscale(70%)");
        $('#img_funil_3').css("-webkit-filter", "grayscale(70%)");
        $('#img_funil_4').css("-webkit-filter", "grayscale(70%)");
        $("#img_"+el.id).css("-webkit-filter", "grayscale(0%)");
        $('#funil_1').hide();
        $('#funil_2').hide();
        $('#funil_3').hide();
        $('#funil_4').hide();
        $(el).fadeIn(500);
    }
    window.onload = function() {
        funil(funil_1);
    }
</script>

<div class="post-area grid_6">
    <div class="posts-container funil">
       <div class="funil_1"><a id="img_funil_1" onclick="funil(funil_1)"><img src="images/funil/1atrair_visitantes.png"></a></div>
       <div class="funil_2"><a id="img_funil_2" onclick="funil(funil_2)"><img src="images/funil/2converter_oportunidades.png"></a></div>
       <div class="funil_3"><a id="img_funil_3" onclick="funil(funil_3)"><img src="images/funil/3fechar_clientes.png"></a></div>
       <div class="funil_4"><a id="img_funil_4" onclick="funil(funil_4)"><img src="images/funil/4fidelizar_clientes.png"></a></div>
    </div>
</div>
<div class="post-area grid_6">
    <div class="posts-container">
        <div id="funil_1">
            <p>
            atrair visitantes atrair visitantes atrair...
            </p>
        </div>
        <div id="funil_2">
            <p>
            converter oportunidades converter oportunidades...
            </p>
        </div>
        <div id="funil_3">
            <p>
            fechar clientes fechar clientes fechar clientes...
            </p>
        </div>
        <div id="funil_4">
            <p>
            fidelizar clientes fidelizar clientes fidelizar...
            </p>
        </div>
    </div>
</div>

very roughly, I want this to happen when the resolution is less than 768:

    
asked by anonymous 22.03.2016 / 15:42

1 answer

2

Use @media queries.

Example: 




.grid6 {
  width:50%;
}



@media only screen and (max-width: 768px) {
 .grid6 {
   width:100%;
 }
}

If the resoltion is less than 768px the div will occupy the entire line, if not only half.

    
22.03.2016 / 16:01
Problem with .htaccess, subdomain Formatting with UNION and LINQ in C #