CSS Hide Elements using css only

Question

Given the following code snippet:

  <div class="ui stackable inverted blue container menu">
    <a class="item" href="/menu">
        logo
    </a>
    <a class="item" href="/menu">
        <i class="large settings  icon"></i>
        <span>Distribui&ccedil;&atilde;o Autom&aacute;tica</span>
    </a>

     <a class="item disabled" href="#" >
        <i class="large options icon "></i>
        <span>Distribui&ccedil;&atilde;o Manual</span>
    </a>

    <a class="item" href="/users">
        <i class="large users icon"></i>
        <span>Usu&aacute;rios</span>
    </a>

    <a class="item" href="/pesquisar_acoes">
        <i class="large search icon"></i>
        <span>Pesquisar</span>
    </a>


    <div class="ui pointing dropdown link item">
        <span class="text"><i class="large line chart icon"></i>Relatórios</span>
        <i class="dropdown icon"></i>
        <div class="menu">
            {#<div class="header">Categories</div>#}

            <a class="item" href="/acoes_cadastradas">Ações Cadastradas</a>

            <div class="divider"></div>

            <a class="item" href="/relatorio_erros">Erros na Distribuição</a>
            <a class="item" href="/relatorio_distribuicao"> Processos Distribuídos</a>
        </div>
    </div>




    <a class="item" href="/desloga">
        <span class="ui teal button"><i class="sign out icon"></i> Sair</span></a>




</div>

I need that when resizing the screen to a max-width = 792px, is visible only the tag that contains the word LOGO. The rest should be hidden. How to do this using only css?

Answer 1

You can use @media from CSS3 (http://www.w3schools.com/cssref/css3_pr_mediaquery.asp) to create the rule when to apply a certain style to a given element, and apply

display: none;

for items to be hidden if the rule is true.

Answer 2

One of the solutions would be the following :

Using media queries and display:none together display:block.

There are several paths using css selectors, there goes creativity.

<div class="ui stackable inverted blue container menu">
    <a class="item" href="/menu">
        logo
    </a>
    <a class="item" href="/menu">
        <i class="large settings  icon"></i>
        <span>Distribui&ccedil;&atilde;o Autom&aacute;tica</span>
    </a>

     <a class="item disabled" href="#" >
        <i class="large options icon "></i>
        <span>Distribui&ccedil;&atilde;o Manual</span>
    </a>

    <a class="item" href="/users">
        <i class="large users icon"></i>
        <span>Usu&aacute;rios</span>
    </a>

    <a class="item" href="/pesquisar_acoes">
        <i class="large search icon"></i>
        <span>Pesquisar</span>
    </a>


    <div class="ui pointing dropdown link item">
        <span class="text"><i class="large line chart icon"></i>Relatórios</span>
        <i class="dropdown icon"></i>
        <div class="menu">
            {#<div class="header">Categories</div>#}

            <a class="item" href="/acoes_cadastradas">Ações Cadastradas</a>

            <div class="divider"></div>

            <a class="item" href="/relatorio_erros">Erros na Distribuição</a>
            <a class="item" href="/relatorio_distribuicao"> Processos Distribuídos</a>
        </div>
    </div>
    <a class="item" href="/desloga">
        <span class="ui teal button"><i class="sign out icon"></i> Sair</span></a>
</div>

<style>
@media(max-width:792px){
	a, .pointing{display:none;}
	a:first-child{display: block;}
	
}
</style>

• about selectors: http://www.w3schools.com/cssref/css_selectors.asp