CSS Hide Elements using css only

Navigation
3

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 to resize the screen to a max-width = 792px, so only the tag containing the word LOGO is visible. The rest must be hidden. How to do this using only css?

    
asked by anonymous 13.12.2016 / 02:18

2 answers

1

One of the solutions would be as follows:

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

There are several paths using the css selectors, there goes of 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>
13.12.2016 / 02:41
2

You can use the CSS3 @media ( link ) to create the rule of when to apply a certain style to a certain element, and apply 

display: none;

for the elements that should be hidden if the rule is true.

    
13.12.2016 / 02:35
Help with TRIGGER MYSQL [closed] Html + Css creation of frequently asked questions