Jump to content

Search the Community

Showing results for tags '@media'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 3 results

  1. lezão

    @Media queries

    Bom dia, meus amigos! Td bem com vcs? Estou precisando de mais uma ajudinha de vcs. Tenho um codigo aqui e não estou acertando a mão nele, estou apanhando desse tal de media queries rsrsrs. Vejam os exemplos de como estão os meus codigos: Gostaria que no Desktop ficasse como o Mobile, e os dois centralizado na pagina, notem que não estão. segue meu codigo: <style type="text/css"> /* My opinion */ body { background-image: url(imagens/slide_1.jpg); margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } /* Section clientes */ .container-cards { flex-wrap: wrap; display: inline-flex; width: 100%; align-items: center; } .box-container { /*border: 1px solid red;*/ display: flex; background: #FFFFFF; font:80%/1 Arial; font-size: 14px; border-radius: 5px; align-items: center; width: 100px; height: 120px; border: 2px solid #AAAAAA; margin: 10px; box-shadow: 0 0 10px #ddd; } .box-container .box-image img { width: 93px; height: 93px; text-align: center; } .title { margin-bottom: 10px; font-size: 16px; font-weight: bold; color: #000; } .description { font-size: 14px; color: #8a8686; } </style> </head> <body> <!--My option--> <div align="center"> <img src="imagens/logo.png" width="200px" height="192px"/></div> <br/> <div align="center"> <div class="container-cards"> <div class="box-container" onclick="location.href='cardapio_pizza.php'" style="cursor:pointer;" align="center"> <section class="box-image"> &nbsp;<img src="imagens/banner_pizzas.png"/><br/> <label class="title"><b>Pizzas</b></label> </section> </div> <div class="box-container" onclick="location.href='cardapio_pizza_cone.php'" style="cursor:pointer;"> <section class="box-image"> <img src="imagens/banner_pizzas_cone.png"/><br/> <label class="title"><b>Pizzas no Cone</b></label> </section> </div> <div class="box-container" onclick="location.href=''" style="cursor:pointer;"> <section class="box-image"> <img src="imagens/banner_porcoes.png"/><br/> <label class="title"><b>Porções</b></label> </section> </div> <div class="box-container" onclick="location.href='cardapio_lanches.php'" style="cursor:pointer;"> <section class="box-image"> <img src="imagens/banner_lanches.png"/><br/> <label class="title"><b>Lanches</b></label> </section> </div> <div class="box-container" onclick="location.href='cardapio_fritas.php'" style="cursor:pointer;"> <section class="box-image"> <img src="imagens/banner_cone_fritas.png"/><br/> <label class="title"><b>Cone de fritas</b></label> </section> </div> <div class="box-container" onclick="location.href='cardapio_refri.php'" style="cursor:pointer;"> <section class="box-image"> <div align="center"> <img src="imagens/banner_refri_sucos.png"/><br/> <label class="title"><b>Bebidas</b></label> </div> </section> </div> </div> <div align="center"> <font size="2" color="#FFFFFF" face="arial"> <p>Horário de atendimento:<br/>Segunda á Sexta das 19:00 as 22:00<br/>Sextas, Sábados e Domingos das 19:00 as 23:30</p> </font> </div>
  2. EdPaulino

    Responsividade

    Bom dia pessoal, estou tentando inserir um menu responsivo no meu projeto, mas quando acesso pelo celular ele não se adapta, continua do mesmo jeito que no computador, o que deve-se fazer pra forçar-lo a se adaptar? segue codigo: <!-- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Menu RESPONSIVO</title> <!---<link rel="stylesheet" href="style.css">--> </head> <style> *{ margin: 0; padding: 0; } .menu{ width: 100%; height: 50px; background-color: #f0f0f0; font-family:'Arial'; } .menu ul{ list-style:none; position: relative; } .menu ul li{ width: 150px; float: left; } .menu ul ul{ position: absolute; visibility: hidden; } .menu ul li:hover ul{ visibility: visible; display:block; } .menu a{ text-decoration: none; display: block; padding: 15px; text-align: center; background-color: #f6f6f6; color: #000; } .menu a:hover{ background-color: #f4f4f4; } .menu ul ul li{ float: none; border-bottom: 1px solid #000; } .menu ul ul li a{ background-color: #f0f0f0; } label[for="bt_menu"]{ padding: 5px; background-color: #d0d0d0; font-family: 'Arial'; text-align: center; font-size: 30px; width: 50px; height: 50px; } #bt_menu{ display: none ; } label[for="bt_menu"]{ display: none; } @media (max-width: 800px){ label[for="bt_menu"]{ display:block; margin-left: 0; } #bt_menu:checked ~ .menu{ margin-left: 0; display: block; } .menu{ margin-top:5px; margin-left: -100%; transition: all .4s } .menu ul li{ width:100%; float: none; } .menu ul ul{ position:static; overflow: hidden; max-height: 0; transition: all 2s; } .menu ul li:hover ul{ height:auto; max-height: 200px; } } </style> <body> <input type="checkbox" id="bt_menu"> <label for="bt_menu">&#9776;</label> <nav class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Serviços</a> <ul> <li><a href="#">Criação de Sites</a></li> <li><a href="#">Artes Visuais</a></li> </ul> </li> <li><a href="#">Cursos</a> <ul> <li><a href="#">Java</a></li> <li><a href="#">Photoshop</a></li> <li><a href="#">HTML/CSS</a></li> </ul> </li> <li><a href="#">Contato</a></li> </ul> </nav> </body> </html> --->
  3. Luccas Gaulia

    Classes de acordo com a resolução

    Ola Pessoal, Estou organizando o css e queria que a classe que fica no index (exemplo: se-include) utilizando uma classe do Bootstrap, mas de acordo com a resolução... Assim, ele colocaria a class de acordo com a resolução seria o tamanho do Bootstrap.... Não esta funcionando, então poderiam me ajudar? /** Smarthphones no formato "retrato" **/ @media screen and (min-width: 480px) and (orientation:landscape){ html{ font-size: 14px; } .btn{ font-size: 12px; } .se-include, .col-md-12{ } } /** Tablets e Smarthphones de segunda geração **/ @media screen and (max-width: 780px) and (orientation:portrait){ html{ font-size: 14px; } .se-include, .col-md-12{ } } /** Desktops, Laptops e TVs. **/ @media screen and (min-width: 780px){ html{ font-size: 16px; } .se-include, .col-md-8, .col-md-offset-2 { } }
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.