2

Galera, boa tarde.

Estou com dificuldades de deixar o rodapé responsivo, ele não acompanha a página. Conseguem auxiliar através desse código que fiz? (Tentei implementar algumas dicas que achei por aqui mas não deu certo)

Grato.

/*Edição do rodape (Footer)*/
footer {
	background-image: url(../img/fundo-rodape.png);
	clear: both;
	padding: 20px 0;
}

footer .container {
	position: relative;
	width: 900px;
}

.social{
	position: absolute;
	top: 12px;
	right: 0;
}

.social li{
	float: left;
	margin-left: 25px;
}

.social a{
	/*tamanho da imagem*/
	height: 32px;
	width: 32px;
	
	/*image replacement*/
	display: block;
	text-indent: -9999px;
}

.social a[href*="facebook.com"]{
	background-image: url(../img/facebook.png);
}

.social a[href*="twitter.com"]{
	background-image: url(../img/twitter.png);
}

.social a[href*="plus.google.com"]{
	background-image: url(../img/googleplus.png);
}
/*Edição do rodape (Footer)*/
 <footer>
            <!-- Conteúdo do rodapé --> 
			
			<div class="container">
				<img src="img/logo-rodape.png" alt="Logo Mirror Fashion">
				
				<ul class="social">
					<li><a href="http://facebook.com/mirrorfashion">Facebook</a></li>
					<li><a href="http://twitter.com/mirrorfashion">Twitter</a></li>
					<li><a href="http://plus.google.com/mirrorfashion">Google+</a></li>
				</ul>
				
			</div>
 </footer>

1 Resposta 1

0

É porque você definiu uma largura fixa na <div class="container">, assim ela nunca irá acompanhar a largura da tela, porque terá sempre a largura de 900px.

Em vez de colocar width: 900px;, altere para width: 100%; e coloque max-width: 900px; e width: 100%; no <footer>:

footer {
    background-image: url(../img/fundo-rodape.png);
    clear: both;
    padding: 20px 0;
   background-color: red;
    max-width: 900px;
   width: 100%;
}

footer .container {
    position: relative;
   width: 100%;
}

Exemplo:

/*Edição do rodape (Footer)*/
footer {
	background-image: url(../img/fundo-rodape.png);
	clear: both;
	padding: 20px 0;
   background-color: red;
	max-width: 900px;
   width: 100%;
}

footer .container {
	position: relative;
   width: 100%;
}

.social{
	position: absolute;
	top: 12px;
	right: 0;
}

.social li{
	float: left;
	margin-left: 25px;
}

.social a{
	/*tamanho da imagem*/
	height: 32px;
	width: 32px;
	
	/*image replacement*/
	display: block;
	text-indent: -9999px;
}

.social a[href*="facebook.com"]{
	background-image: url(../img/facebook.png);
}

.social a[href*="twitter.com"]{
	background-image: url(../img/twitter.png);
}

.social a[href*="plus.google.com"]{
	background-image: url(../img/googleplus.png);
}
/*Edição do rodape (Footer)*/
<footer>
            <!-- Conteúdo do rodapé --> 
			
   <div class="container">
      <img src="img/logo-rodape.png" alt="Logo Mirror Fashion">
      
      <ul class="social">
         <li><a href="http://facebook.com/mirrorfashion">Facebook</a></li>
         <li><a href="http://twitter.com/mirrorfashion">Twitter</a></li>
         <li><a href="http://plus.google.com/mirrorfashion">Google+</a></li>
      </ul>
      
   </div>
</footer>

6
  • Certo, eu tirei largura fixa e ficou ok quando executa no mobile, mas desktop continua, a margem ultrapassa o layout, entende?
    – Mayke Dias
    Commented 22/02/2018 às 21:03
  • Editei a resposta. Veja se era isso.
    – Sam
    Commented 22/02/2018 às 21:08
  • Agora o rodapé ficou no tamanho correto, porém ainda ele não alinha. Não consigo postar foto mas vou tentar explicar. Meu site tem um padrão de 940px (esse padrão foi solicitado), então ele não ocupa 100% da tela, o rodapé agora está correto fixo em baixo e o tamanho correto, porém ele distorce a página devido não centralizar junto ao resto do layout. Deu pra entender? Agradeço desde já sua ajuda.
    – Mayke Dias
    Commented 22/02/2018 às 23:15
  • Coloca margin: 0 auto; no footer.
    – Sam
    Commented 22/02/2018 às 23:20
  • Cara, ia comentar isso agora, um amigo sugeriu isso também e deu certo. Agradeço muito a ajuda. Valeu !!!
    – Mayke Dias
    Commented 22/02/2018 às 23:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .