Logo Hardware.com.br
Jaboticabal
Jaboticabal Novo Membro Registrado
38 Mensagens 3 Curtidas

[Resolvido] Ocultar objetos na versão mobile e mante-lo visível na versão desktop

#1 Por Jaboticabal 01/11/2016 - 19:34
Olá galera, sou novo em programação, tenho um site onde criei um esquema para mostrar um banner de anuncio no inicio do site, mais queria ocultar esse banner na versão mobile do meu site, mostrar apenas no PC, segue abaixo o código que escrevi para mostrar esse banner, lembrando que o código ta funcionando perfeitamente, apenas quero ocultar o banner no celular, obrigado!

                    <style>

     .overlay { position:absolute; top: 90px; left: 550px; }

     </style>

           <body>

           <div style='z-index: 0;'>

          

</div>

<div style='z-index: 1;'>

<img class='overlay' src='https://3.bp.blogspot.com/-MLFIQ3Xbly4/WBkBvkGUdBI/AAAAAAAACPs/EX9sV2hkLkk1bMfmsYWfoDLodOZDnQ-8gCLcB/s1600/BANNER_TOPO.jpg'/></div>

</body>

<br/>
codigo html javascrpit mobile site versao mostrar ocultar banner objetos mobile mantelo
Leonardo.casilva
Leonardo.cas... Membro Senior Registrado
127 Mensagens 34 Curtidas
#2 Por Leonardo.cas...
01/11/2016 - 19:58
Fala Jovem, sempre que precisar de algo especifico para Mobile, use a @Media, da uma pesquisada nela.

Eu ajustei seu HTML, testa e ve se funciona

<style>

    .overlay { position:absolute; top: 90px; left: 550px; }



    /*Esconde a dive de classe Overlay caso seja identificado que o width Mobile maximo deseja igual ou menor que 980px*/

    @media only screen and (max-width: 980px){

        .overlay { display: none; }

    }

</style>

<body>

    <div style='z-index: 0;'>



    </div>



    <div style='z-index: 1;'>

        <img class='overlay' src='https://3.bp.blogspot.com/-MLFIQ3Xbly4/WBkBvkGUdBI/AAAAAAAACPs/EX9sV2hkLkk1bMfmsYWfoDLodOZDnQ-8gCLcB/s1600/BANNER_TOPO.jpg'/>

    </div>

    </body>

<br/>
© 1999-2024 Hardware.com.br. Todos os direitos reservados.
Imagem do Modal