0

I would like to know how can i set my footer width to 100%? I tried to set .footer-container and .footer width to 100% as well as absolute position.

Here's the website:

http://buysmartcardsonline.com/

1
  • Your footer is set to 100% of it's parent container. Also, you should provide your own code, not a link to your site. Do you want it to be 100% of the browser window?
    – Lee
    Jan 5, 2015 at 10:43

5 Answers 5

1

If you moved your div.footer-container outside the div.page container, it should automatically cover the width of the page.

Before:

<div class="page">
    ...

    <div class="footer-container">...</div>
</div>

After:

<div class="page">
    ...
</div>
<div class="footer-container">...</div>
2
  • On which Magento file do I do that? page.xml? Thank you :)
    – ActiveCard
    Jan 5, 2015 at 13:09
  • @ActiveCard: I don't know anything about Magento in particular, but look for which ever file/template contains the tags in my answer, edit it and save it. Should do the trick.
    – Hubro
    Jan 5, 2015 at 17:01
0

As @Hubro mentioned in his answer moving the div.footer-container outside the div.page container would be ideal. But if you don't want to move the divs you could try using absolute positioning for the footer like below

.wrapper{
   position: relative;
}

.footer-container{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -27px; (height of the footer container)
}
0
0

Remove class="footer-container" from class="page" and make it direct child of class="wrapper"

from

enter image description here

to

enter image description here

0

Try following code - I hope this is what you are looking for

.footer-container {
                   left: 0px;
                   width: 100%;
                   position: fixed;
                   bottom: 0px;
                   }
0

You should place the .footer-container outside the .page and then inside the add a div within the .footer-container with the class of .page to get content within the footer the same width.

<div class="page">Your page content</div>

<div class="footer-container">
    <div class="page">
       Footer Content
    </div>
</div>
2
  • Where do I do that? On Magento page.xml ? Thank yoou :)
    – ActiveCard
    Jan 5, 2015 at 13:09
  • Wherever your footer is located on your website. Jan 5, 2015 at 13:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.