Question 177044 in CSS Question posted in
Some basic documentation can be found here.

Can I center & cover page w/100% width footer in CSS?

footer {
  background: #fff;
  color: #000;
  clear: both;
  padding: 10px 0px;
  text-align: center;
  border-radius: 25px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
<footer>
  <div class="footer">
    <p>lorem ipsum dolor</p>
  </div>
</footer>

The footer isn’t centred and all solutions I can find say that width: 100% should fix it, but it doesn’t.

I’ve tried a lot of solutions from past questions about ill-centred footers here.

Tags:

2

Answers


  1. 0

    100% is 100% of the parent component, therefore not always 100% of the view.
    You can use width: 100vw to make the component width 100% of the width of the page.

    Login or Signup to reply.
  2. 0 
    footer {
  background: #fff;
  color: #000;
  clear: both;
  padding: 10px 0px;
  text-align: center;
  border-radius: 25px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100% !important;
  max-width: 100% !important;
}

    try with max-width: 100%;
    may be some css property applied fir max-width

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

Back To Top
Search