responsive alignment on the footer

Question

responsive alignment on the footer

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

1

I'd like some help to align footer on responsiveness. Put the copyright down below (I already tried padding , but it disappears) and align the tabs in section(border-right) , the rest is working, I'll leave here the codepen .

body {
  margin:0;
  padding:0;
  display:flex;
  min-height: 100vh;
  flex-wrap;
}

footer{
  Position:relative;  
  align-self:flex-end;
  background-color:#222;
  color:#fff;
  min-height:2;
  text-align: center;
  width:100%;
}

footer:after{
  content: '<footer>
  <div class ="section">
    <h2>Nosso endereço:</h2>
    <br>
    <td>Rua blalal, 132 - Irajá</td>
    <td>Rio de Janeiro Cidade - RJ.</td>
    <td>Cep: 21300-630</td>
    <br>  
    <td>Email:</td>
    <td>[email protected]</td>  
  </div>
  <div class ="section">
    <h2>Consulte-nos:</h2>
    <br>    
    <td>Telefone: (21)9999-9999</td>
    <td>Horário de Atendimento</td>
    <td>de Seg a Sexta: 08:00 as 17:00</td>  
  </div> 
  <div class ="section">
    <h2>Fale conosco nas Redes Sociais:</h2><br> 
    <td><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></td>   
</div>
</footer>a9  Infogyba Soluções em Ti  ';
  position: absolute;
  width: 100%;
  color: #8c8c96;
  font-size:1em;
  font-weight:600;
  font-family:'Arial',sans-serif;
  text-align: center;
  bottom:0;  
  display:block;
}

.section{
  float:left;
  width:33%;  
  height:auto;
  border-right:1px;  
  border-right-style: outset;  
} 

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

  .section{
    float: none;
    width: 100%;
   }
}

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

footer .section  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;
  }
}

body {
  margin:0;
  padding:0;
  display:flex;
  min-height: 100vh;
  flex-wrap;
}

footer{
  Position:relative;  
  align-self:flex-end;
  background-color:#222;
  color:#fff;
  min-height:2;
  text-align: center;
  width:100%;
}

footer:after{
  content: '<footer>
  <div class ="section">
    <h2>Nosso endereço:</h2>
    <br>
    <td>Rua blalal, 132 - Irajá</td>
    <td>Rio de Janeiro Cidade - RJ.</td>
    <td>Cep: 21300-630</td>
    <br>  
    <td>Email:</td>
    <td>[email protected]</td>  
  </div>
  <div class ="section">
    <h2>Consulte-nos:</h2>
    <br>    
    <td>Telefone: (21)9999-9999</td>
    <td>Horário de Atendimento</td>
    <td>de Seg a Sexta: 08:00 as 17:00</td>  
  </div> 
  <div class ="section">
    <h2>Fale conosco nas Redes Sociais:</h2><br> 
    <td><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></td>   
</div>
</footer>a9  Infogyba Soluções em Ti  ';
  position: absolute;
  width: 100%;
  color: #8c8c96;
  font-size:1em;
  font-weight:600;
  font-family:'Arial',sans-serif;
  text-align: center;
  bottom:0;  
  display:block;
}

.section{
  float:left;
  width:33%;  
  height:auto;
  border-right:1px;  
  border-right-style: outset;  
} 

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

  .section{
    float: none;
    width: 100%;
   }
}

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

footer .section  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;
  }
}

html css

asked by anonymous 19.12.2016 / 17:13

3 answers

1

Friend, it's a bit confusing structuring, I did not understand why you put the text in the footer in a footer:after

But what is causing this headache is that you left with absolute position and bottom: 0px

So I took the absolute position to relative and worked quietly, try this:

@media only screen and (max-width: 800px) {  
  footer:after{
    position: relative;
  }
}

19.12.2016 / 17:37

0

Take the text content from within the CSS, this goes against all possible good practices. Put it on a proper div with content due, if it's to be hidden or anything like that, use the @media as your friend Lennon pointed out!

19.12.2016 / 17:51

Changing the default mongodb database of a Meteor application Make call to commands direct artisan of code [closed]

score 0 · Accepted Answer

You can use some other css properties with flex , see below;

footer {
    display: flex;
}
.section {
    flex: 1;
    padding: 15px;
}

The flex: 1 property defines that each element within footer (sections) must fill the space so that all width is filled.