# Footer not tied to Discourse width
**URL:** https://meta.discourse.org/t/footer-not-tied-to-discourse-width/76784
**Category:** Support
**Created:** [12월 26, 2017, 6:27오후 UTC](https://meta.discourse.org/t/footer-not-tied-to-discourse-width/76784 "2017-12-26T18:27:55Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [12월 26, 2017, 6:27오후 UTC](https://meta.discourse.org/t/footer-not-tied-to-discourse-width/76784/1 "2017-12-26T18:27:55Z")
I’m trying to create a foot something like: [https://discuss.newrelic.com/](https://discuss.newrelic.com/)
I snagged the footer I found there, stripped stuff out, and did my best to snag the related CSS. It’s sort-of close, but the width is the whole browser rather than just the part that Discourse is using.
What am I missing?
Example: [https://s2.literatecomputing.com/](https://s2.literatecomputing.com/)
CSS: : [discourse-theme-footer/desktop/desktop.scss at master · pfaffman/discourse-theme-footer · GitHub](https://github.com/pfaffman/discourse-theme-footer/blob/master/desktop/desktop.scss)
Footer: [discourse-theme-footer/desktop/footer.html at master · pfaffman/discourse-theme-footer · GitHub](https://github.com/pfaffman/discourse-theme-footer/blob/master/desktop/footer.html)
---
### Author:  [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [12월 26, 2017, 6:38오후 UTC](https://meta.discourse.org/t/footer-not-tied-to-discourse-width/76784/2 "2017-12-26T18:38:12Z")
You missing a div with `.container` class. Wrap all `.footer-col` and `.social-icons` like below
```plaintext
```
Also remove the margin (_only for `div#footer-top`_) in [this line](https://github.com/pfaffman/discourse-theme-footer/blob/master/desktop/desktop.scss#L5).
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [12월 26, 2017, 6:56오후 UTC](https://meta.discourse.org/t/footer-not-tied-to-discourse-width/76784/3 "2017-12-26T18:56:51Z")
That seems to have done it. CSS remains a twisty maze of passages that all look alike. It always makes sense when it’s right, but often I can’t guess why it’s wrong.
A thousand thank-yous.
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [12월 27, 2017, 12:21오전 UTC](https://meta.discourse.org/t/footer-not-tied-to-discourse-width/76784/4 "2017-12-27T00:21:56Z")
Ah, one problem, the Social Icons are outside of the desired margins. I think they’re in the container, but there’s something else I’m missing.
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [12월 27, 2017, 1:06오전 UTC](https://meta.discourse.org/t/footer-not-tied-to-discourse-width/76784/5 "2017-12-27T01:06:21Z")
They are not inside the container, as you can see here:
btw you can simply add:
```
.social-icons {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
max-width: 1170px;
}
```
or, alternatively, put the div `social-icons` inside the container 😉
**EDIT :** at line 63 you have a `` that close the `footer-col` n.4, at line 64 the other `` close the `container`. Delete that last div and add it after the `social-icons` part
---
### Author:  [@Noah751](https://meta.discourse.org/u/Noah751)
#### Post date: [12월 27, 2017, 4:23오전 UTC](https://meta.discourse.org/t/footer-not-tied-to-discourse-width/76784/6 "2017-12-27T04:23:00Z")
I’m using a different footer style of my own, how will I make my footer fit with Discourse on mobile
---
### Author:  [@Noah751](https://meta.discourse.org/u/Noah751)
#### Post date: [12월 27, 2017, 4:51오전 UTC](https://meta.discourse.org/t/footer-not-tied-to-discourse-width/76784/7 "2017-12-27T04:51:54Z")
I am also having grey boxes in between categories on my forum, incorrect spacing at the bottom
Can you provide information on how to fix this?
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [12월 27, 2017, 10:42오전 UTC](https://meta.discourse.org/t/footer-not-tied-to-discourse-width/76784/8 "2017-12-27T10:42:32Z")
> [@Noah751](#):
>
> I’m using a different footer style of my own, how will I make my footer fit with Discourse on mobile
Using media queries
> [@Noah751](#):
>
> Can you provide information on how to fix this?
Share the code you are trying to use
---
### Author:  [@Noah751](https://meta.discourse.org/u/Noah751)
#### Post date: [12월 27, 2017, 10:21오후 UTC](https://meta.discourse.org/t/footer-not-tied-to-discourse-width/76784/9 "2017-12-27T22:21:29Z")
Here is the footer code for my forum, Can you provide how to make spacing accurate on mobile Thanks.
> **[Footer Code](https://docs.google.com/document/d/14Tzl3cA3EUDnXm2QSQJiIvamEKWbp46S3Jr7kSxaRAE/edit?usp=sharing)**
>
> Footer Code (CSS) .footer { background-color: #414141; width: 100%; text-align: left; font-family: sans-serif; font-weight: bold; font-size: 16px; padding: 50px; margin-top: 50px; } .footer .footer-left, .footer .footer-center,...
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [12월 28, 2017, 12:05오전 UTC](https://meta.discourse.org/t/footer-not-tied-to-discourse-width/76784/10 "2017-12-28T00:05:02Z")
You have some problems with padding and margin settings in your `media query`.
Try to change it this way:
```
@media (max-width: 767px) {
.footer {
font-size: 14px;
padding: 0px;
margin-top: 0px;
}
.footer .footer-left,
.footer .footer-center,
.footer .footer-right {
display: block;
width: 100%;
text-align: center;
}
.footer .footer-center i {
margin-left: 0;
}
.footer .about {
padding-left: 15px;
padding-right: 15px;
padding-top: 40px;
}
.footer .name {
padding-bottom: 40px;
}
}
```
it should work much better.
---
### Author:  [@Noah751](https://meta.discourse.org/u/Noah751)
#### Post date: [12월 28, 2017, 12:23오전 UTC](https://meta.discourse.org/t/footer-not-tied-to-discourse-width/76784/11 "2017-12-28T00:23:25Z")
Thank you @dax, much appreciated 🙂
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [6월 8, 2024, 12:43오후 UTC](https://meta.discourse.org/t/footer-not-tied-to-discourse-width/76784/12 "2024-06-08T12:43:46Z")
이 주제는 2355일 후 자동으로 닫혔습니다. 더 이상 새 답글을 작성할 수 없습니다.