Responsive alignment on footer

Asked

Viewed 340 times

1

I would like some help to align the footer responsiveness. Put the copyright down further (I’ve tried padding, but it disappears) and align the separators in the section(border-right), the rest is working, I’ll leave 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: '\00a9  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;
  }
}
<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>

html css

  • have tried to put .section {width: 33%;} ?

  • yes , moves down.

  • You want the sections to stay centralized is this?

  • yes and put the copyright down below the content where I reduce the page,.

3 answers

1

Friend, a little confused the structuring, I did not understand why put the text in the footer in a footer:after

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

So I took the absolute position for relative and it worked smoothly, try this:

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

0


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

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

The estate flex: 1 defines that each element within footer (sections) must fill the space so that the whole width be filled in.

  • was good , but the copyright does not appear.

  • @Claytoncampos put the copyright on a specific div, it will be better this way, and doing this you can also put a link in the name to make it easier for people to find you and etc.

  • vlw , I will hit the copyright ,thank you.

0

It takes the text content out of the CSS, it goes against all possible good practices. Put him in his own div with content due, if it’s to be hidden or anything like that, use @media as his friend Lennon pointed out!

Browser other questions tagged html css

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