pfaffman
(Jay Pfaffman)
December 26, 2017, 6:27pm
1
I’m trying to create a foot something like: 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/
CSS: : https://github.com/pfaffman/discourse-theme-footer/blob/master/desktop/desktop.scss
Footer: https://github.com/pfaffman/discourse-theme-footer/blob/master/desktop/footer.html
1 Like
You missing a div with .container
class. Wrap all .footer-col
and .social-icons
like below
<div class="container">
<div class="footer-col"></div>
<div class="footer-col"></div>
<div class="footer-col"></div>
<div class="social-icons"></div>
</div>
Also remove the margin (only for div#footer-top
) in this line .
7 Likes
pfaffman
(Jay Pfaffman)
December 26, 2017, 6:56pm
3
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.
6 Likes
pfaffman
(Jay Pfaffman)
December 27, 2017, 12:21am
4
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.
dax
(Daniela)
December 27, 2017, 1:06am
5
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 </div>
that close the footer-col
n.4, at line 64 the other </div>
close the container
. Delete that last div and add it after the social-icons
part
5 Likes
Noah751
December 27, 2017, 4:23am
6
I’m using a different footer style of my own, how will I make my footer fit with Discourse on mobile
Noah751
December 27, 2017, 4:51am
7
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?
dax
(Daniela)
December 27, 2017, 10:42am
8
Using media queries
Share the code you are trying to use
4 Likes
Noah751
December 27, 2017, 10:21pm
9
Here is the footer code for my forum, Can you provide how to make spacing accurate on mobile Thanks.
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,...
dax
(Daniela)
December 28, 2017, 12:05am
10
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.
7 Likes
Noah751
December 28, 2017, 12:23am
11
Thank you @dax , much appreciated
1 Like
This topic was automatically closed after 2355 days. New replies are no longer allowed.