Question 44649 in Html Question posted in
Some basic documentation can be found here.

Width 100% footer in a non responsive site – Html

I have to fix the footer in a non-responsive site.

All the content (but the footer) is placed in a CSS declaration called ".centrado". It has a fixed width:

  .centrado{
    margin:0 auto;
    width:1170px;
    height:auto;
    display:block;
    overflow:hidden;
   }

I need a footer with a width of 100%. It works in desktops but not in mobiles. The CSS for the footer is:

.pie_de_sitio{
   float:left; 
   width: 100%;
   height:auto;
   display:flex;    
   overflow:hidden; 
   align-items: center; 
   justify-content: center;
   background:#333D4C;
   padding:25px 0 25px 0;   
   margin: 50px 0 0 0;  
   bottom: 0;
}

In mobiles I’m getting a white space in the right side of the footer. That white space has a width of approximately 20% of the screen on mobiles.

Here is how the footer looks on mobiles:

The Footer

Thanks

Tags:

2

Answers


  1. 0

    Try to divide the full website into section and add each section into container or container-fluid class.
    Note: Make sure to keep the footer on container-fluid class.

    After that start fixing the responsiveness from top to bottom and inspect the website and check which section is overflowing, the your footer will be fixed

    Login or Signup to reply.
  2. 0

    Remove the float:left property for mobile, make it none and try, and adjust width accordingly. Try writing media query for better understanding. Let me know if this doesn’t work for you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search