Content of responsive footer

Asked

Viewed 143 times

-2

I would like help in my code to make the footer’s "content" columns responsive.
Follow the code below:

*{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin:0;
    padding: 0;    
}

*.*:before, *:after{
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.5;   
}

body,html{
    width:100%;
    height:100%;    
}

footer{
    bottom: 0px;
    width: 100%;
    color: #000000;
    height: 200px;
    margin-bottom: 20px; 
    background-color:#000;
    color:#fff;
    clear: both;
    padding: 40px;
    position:absolute;
    z-index: 10;    
}

footer:after{
    content: '\00a9  Infogyba Soluções em Ti  ';
    position: absolute;
    width: 100%;
    color: #8c8c96;
    line-height: 40px;
    font-size:1em;
    font-weight:600;
    font-family:'Arial',sans-serif;  
    text-align: left;
    bottom:0;
    display: block;
}

.endereco,.telefone{
    float:left;
    width: 33.33%;
    border-right: 1px;
    margin-right:15px;  
    border-right-style: outset;  
}

.redes sociais{
    float:left;
    width: 33.33%;  
}

@media only screen and (max-width: 480px) {
    .endereco, .telefone, .redes-sociais  {
        float: none;
        width: 100%;
    }
}

footer h1,h2{
    font-size:1em;
    font-weight:600;
    font-family: 'Arial',sans-serif;
    text-align:center; 
    display:inline-block;
}


footer .redes-sociais  a:hover{
    display: inline-block;
    position: relative;
    -webkit-animation-name: rotacao; /* Chrome, Safari, Opera (nome da animação)*/
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera (Duração da animação)*/
    animation-name: rotacao; /* nome da animação */
    animation-duration: 2s; /* Duração da animação */
}

@keyframes rotacao {
    from {transform: rotate(1deg);}
    to {transform: rotate(360deg);}
}
@media screen and(max-width:768){
    footer{
        padding-bottom: 3em;   
    }  
}
<footer>
  <div class="endereco">
    <h1>Nosso endereço:</h1>
    <br>
    <br>    
    <h1>Rua blalal, 132 - Irajá</h1>
    <h2>Rio de Janeiro Cidade - RJ.</h2>
    <h2>Cep: 21300-630</h2>
  </div>
  <div class="telefone">
    <h1>Consulte-nos:</h1>
    <br>    
    <br>    
    <h2>Telefone: (21)9999-9999</h2>
    <h2>Horário de Atendimento</h2>
    <h2>de Seg a Sexta: 08:00 as 17:00</h2>
  </div>
  <div class="redes-sociais">
    <td><h1>Fale conosco nas Redes Sociais</h1></td>    
    <br>
    <br>    
    <a href="#"><img src="imagens/facebook.png"></a>
    <a href="#"><img src="imagens/twitter.png"></a>
    <a href="#"><img src="imagens/youtube.png"></a>
    <a href="#"><img src="imagens/google.png"></a>
  </div>  
  <div>
    <br>
    <br>  
    <h1>Email:</h1>
    <h2>[email protected]</h2>
  </div>  
</footer>

html css

  • I think the problem is that the clips are in absolute position, erase it and put float:left; see if it works

  • didn’t work out delete the Absolute position and put the float:left.

  • The easiest is to post the relevant code instead of images, to be easier who wants to help you test

  • You have a very serious error in your HTML, you are closing the </head> after the <body> shall close it immediately before the <body>

1 answer

0


There are a lot of things you don’t need and it’s much simpler than what you did, this is just an example, just taking your HTML, you can test by increasing and decreasing the browser window (browser) here, I determined that the footer changes display when window <= 480px:

.endereco, .telefone, .redes-sociais  {
  float:left;
  width: 33.33%;
}

@media only screen and (max-width: 480px) {
  .endereco, .telefone, .redes-sociais  {
     float: none;
     width: 100%;
   }
}
<footer>
<div class="endereco">
<h1>Nosso endereço:</h1>
<br>
<br>    
<h1>Rua blalal, 132 - Irajá</h1>
<h2>Rio de Janeiro Cidade - RJ.</h2>
<h2>Cep: 21300-630</h2>
</div>
<div class="telefone">
<h1>Consulte-nos:</h1>
<br>    
<br>    
<h2>Telefone: (21)9999-9999</h2>
<h2>Horário de Atendimento</h2>
<h2>de Seg a Sexta: 08:00 as 17:00</h2>
</div>
<div class="redes-sociais">
<td><h1>Fale conosco nas Redes Sociais</h1></td>    
<br>
<br>    
<a href="#"><img src="imagens/facebook.png"></a>
<a href="#"><img src="imagens/twitter.png"></a>
<a href="#"><img src="imagens/youtube.png"></a>
<a href="#"><img src="imagens/google.png"></a>
<br>
<br>    
<h1>Email:</h1>
<h2>[email protected]</h2>
</div>
</footer>

Note that the length of sections (33.33%) is only 100% / 3 sections

  • Thank you very much guy , got very good, vlw even.

  • You’re welcome @Claytoncampos. Good luck

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.