Footer not tied to Discourse width


(Jay Pfaffman) #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: : discourse-theme-footer/desktop.scss at master · pfaffman/discourse-theme-footer · GitHub

Footer: discourse-theme-footer/footer.html at master · pfaffman/discourse-theme-footer · GitHub


(Vinoth Kannan) #2

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.


(Jay Pfaffman) #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.


(Jay Pfaffman) #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.


(Daniela) #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 :wink:

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


#6

I’m using a different footer style of my own, how will I make my footer fit with Discourse on mobile


#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?


(Daniela) #8

Using media queries

Share the code you are trying to use


#9

Here is the footer code for my forum, Can you provide how to make spacing accurate on mobile Thanks.


(Daniela) #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.


#11

Thank you @Dax, much appreciated :slight_smile: