Davi DAlessandro
-
Posts
1 -
Cadastrado em
-
Última visita
-
CSS Problemas com responsividade de pagina web
Davi DAlessandro postou um tópico em Web e banco de dados
Olá, boa tarde Não entendo muito de programação mas me foi demandado um trabalho e tenho que cumprir. Estou com dificuldades em deixar uma pagina responsiva para mobile. Coloquei um rodapé na pagina mas quando reduzo o tamanho da tela o rodapé deixa o fim da pagina e passa a ocupar o meio dela. ja tentei de varias formas corrigir o erro mas nao faço ideia do que possa estar errado. Ps: uma coisa que notei no HTML da pagina é que o body nao ocupa a pagina toda e acho que por isso quando mudo a orientação da pagina o rodpé vai pro "final" do body. Agradeço quem puder ajudar <!DOCTYPE html> <head> <title>Idealine - Ponto Web</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link type="text/css" rel="stylesheet" media="screen and (max-width: 1440px)" href="./css/mobile.css"/> <link type="text/css" rel="stylesheet" media="screen and (min-width: 1440px)" href="./css/main.css"/> <body> <header class="azul"> <div class="logo"> <img src="./Img/idealine-branco.png" width="250" height="75"/></div> </header> <div class="faixa-laranja"></div> <br> <div class="texto"> <h2>Controle de Ponto Web</h2> <h6>Entre com seus dados de acesso</h6> </div> <div class="login"> <div id="secullum-login"></div> </div> <footer class="rodape"> <div class="redes-sociais"> <a href="https://www.facebook.com/idealineweb/"><img src="./Img/face.png" width="38px"></a> <a href="https://instagram.com/idealineweb?igshid=zxscoc85zgoi"><img src="./Img/insta.png" width="38px"></a> <a href="https://www.linkedin.com/company/idealine/?viewAsMember=true"><img src="./Img/linked.png" width="38px"></a> </div> </footer> </body> <script type="text/javascript" src="https://autenticador.secullum.com.br/Js/login-pontoweb-externo.js"></script> </html> body { margin: 0; } .azul { background-color: #002F60; width: 100%; height: 89px; margin: 0px } .login { display: flex; justify-content: center; padding-top: 135px; } .faixa-laranja { width: 100%; background-color:#FF736B; height: 10px; } .texto { font-family: "Open Sans", sans-serif; font-size: 22px; color: #002F60; text-align: center; line-height: 0.5px; padding-top: 8px; } #secullum-login { border:#002E5D solid 1px; position: absolute; } .login { display: flex; justify-content: center; align-items: center; padding-top: 180px; } .logo { padding: 8px; justify-content: center; display: flex; } .rodape { background-color:#002F60; width: 100%; bottom: 0; position: fixed; height: 50px; } .redes-sociais { display: flex; align-items: center; justify-content: space-evenly; padding-top: 6px; }
Sobre o Clube do Hardware
No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais
Direitos autorais
Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais
