Footer does not accompany site layout and is not responsive

Navigation
2

Hello, good afternoon.

I'm having trouble getting the footer responsive, it does not track the page. Can you help me with this code? (I tried to implement some tips that I found here but did not work)

Thank you. 

/*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>
    
asked by anonymous 22.02.2018 / 21:42

1 answer

0

It's because you set a fixed width in <div class="container"> , so it will never match the width of the screen, because it will always have the width of 900px .

Instead of putting width: 900px; , change to width: 100%; and put max-width: 900px; and width: 100%; into <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%;
}

Example: 

/*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>
    
22.02.2018 / 21:48
Ignore registration when MySql / PHP information is missing Java configuration in fedora linux