Improving Footer

HTML & CSS
23

What are you stuck with exactly?

It looks like you have too much top padding on the footer but I assume you know how to adjust that.

46px 8px 8px

You probably want less top and more bottom.


32px 8px 16px

It all depends on what you want?

24

To be identical to this one: https://jsfiddle.net/sLg5az41/2/

mushed html

Which canā€™t be done because that is the html where everything is mushed together.

Even with the neater one they donā€™t look the same: https://jsfiddle.net/9m6hvzun/2/

not mushed html:

mushed html is 1st one / neater one is the 2nd one.

25

I was trying to figure this out: https://jsfiddle.net/js9ezbx7/3/

I am confused as to number values would be placed in there to match

this one: https://jsfiddle.net/sLg5az41/2/

.marginLeft {
 margin:
}

.marginRight {
margin:
}

        <span class="marginLeft"> </span>
        <span class="common-text C9DxTc">|</span>
        <span class="marginRight"> </span>
        <a class="XqQF9c" href="#" target="_blank"><span class="common-text text1">something</span></a>
        <span class="marginLeft"> </span>
        <span class="common-text C9DxTc">|</span>
       <span class="marginRight"> </span>
26

Its just margins and removing the bold from one of those links.


.my-footer {
  box-sizing: border-box;
  border-top: 1px solid #1155cc;
  background: #121212;
  text-align: center;
  word-wrap: break-word;
  margin: 0 -8px;
  padding: 22px 8px 8px;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  line-height: 1.5;
  vertical-align: baseline;
}
.my-footer a {
  text-decoration: none;
}
.my-footer b {
  color: #f6b26b;
  font-weight: 400;
  margin: 0 5px;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 13px;
}
.footer-top a {
  color: #0059dd;
  font-weight: 700;
}
.my-footer .text5 {
  color: #38761d;
  font-weight:400;
}
.text6 {
  color: #b45f06;
  font-weight: 700;
}
.footer-mid {
  margin-bottom:51px;
  color: #0059dd;
  font-family: Arial;
  font-size: 24px;
  font-weight: 700;
}
.footer-base {
  color: #0059dd;
}


<footer class="my-footer">
  <div class="footer-top">
    <a href=" #" target="_blank">something</a><b>|</b>
    <a href="#" target="_blank">something</a><b>|</b>
    <a href="#" target="_blank"><span class="text5">something</span><span class="text6">something</span></a>
  </div>
  <div class="footer-mid">something</div>
  <div class="footer-base">something</div>
</footer>

That is exact on my screen although no one in the world would have known otherwise as this is a pointless exercise.

27

This way works: https://jsfiddle.net/m5g2k70b/5/

.marginLR {
  margin: 0 2px;
}

.C9DxTc {
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: #f6b26b;
  position: relative;
  top: 2px;
  left: 0;
}

        <span class="marginLR"></span>
        <span class="C9DxTc"></span>
        <span class="marginLR"></span>
        <a class="XqQF9c" href="#" target="_blank"><span class="common-text text1">something</span></a>
       <span class="marginLR"></span>
        <span class="C9DxTc"></span>
      <span class="marginLR"></span>
28

This is better: https://jsfiddle.net/47o8swd3/4/

.my-footer {
  box-sizing: border-box;
  border-top: 1px solid #1155cc;
  background: #121212;
  text-align: center;
  word-wrap: break-word;
  margin: 0 -8px;
  padding: 22px 8px 8px;
  font-family: Verdana, Arial;
  font-size: 13.33px;
  line-height: 1.5;
  vertical-align: baseline;
}

.my-footer a {
  text-decoration: none;
}

.my-footer b {
  width: 1px;
  height: 12px;
  background-color: #f6b26b;
  position: relative;
  top: 4px;
  left: 0;
  margin: 0 7.4px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 13px;
}

.footer-top a {
  color: #0059dd;
  font-weight: 700;
}

.my-footer .text5 {
  color: #38761d;
  font-weight:400;
}

.text6 {
  color: #b45f06;
  font-weight: 700;
}

.footer-mid {
  margin-bottom:49px;
  color: #0059dd;
  font-family: Arial;
  font-size: 24px;
  font-weight: 700;
}

.footer-base {
  color: #0059dd;
  padding: 0 0 31px 0;
}

<footer class="my-footer">
  <div class="footer-top">
    <a href=" #" target="_blank">something</a><b></b>
    <a href="#" target="_blank">something</a><b></b>
    <a href="#" target="_blank"><span class="text5">something</span><span class="text6">something</span></a>
  </div>
  <div class="footer-mid">something</div>
  <div class="footer-base">something</div>
</footer>
29

My version was actually very close. I superimposed it on top of yours and there was no misalignment at all that I could see with the naked eye.

Your changes are veering on magic numbers again and I wouldnā€™t do it like that. Once you start using fractions of a pixel itā€™s ā€˜game overā€™ as far as Iā€™m concerned.

Feel free to keep changing but you asked for improvement not detriment. :slight_smile:

1 Like