# Footer Spacing

**URL:** <https://community.hubspot.com/t/footer-spacing/17512>\
**Category:** CMS Development\
**Created:** [December 2, 2019, 10:21pm UTC](https://community.hubspot.com/t/footer-spacing/17512 "2019-12-02T22:21:19Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![dchambers](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dchambers/32/44643_2.png) [@dchambers](https://community.hubspot.com/u/dchambers)\
**Post date:** [December 2, 2019, 10:21pm UTC](https://community.hubspot.com/t/footer-spacing/17512/1 "2019-12-02T22:21:19Z")

</div>

My footer appears the way I hope it would in desktop on full screen. However, when you shrink the window, it gets wonky and loses its shape. The two elements seem to overlap, and it looks poor. I’ve finally gotten it to the point that the home page and the inside pages are the same. Unfortunately, they are equally disappointing when minimizing the browser.

> **[Strouse | Flexible Material & Tape Converter | 3M Converter](https://www.strouse.com/)**
>
> More than a simple converter, Strouse provides flexible material solutions, adhesive converting expertise, frictionless support, and problem-solving.

---

<div class="post-metadata">

**Author:** ![DanielSanchez](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/danielsanchez/32/48193_2.png) [@DanielSanchez](https://community.hubspot.com/u/DanielSanchez)\
**Post date:** [December 2, 2019, 10:52pm UTC](https://community.hubspot.com/t/footer-spacing/17512/2 "2019-12-02T22:52:25Z")

</div>

Hi @dchambers

Remove the _ **CSS inline** _ “_**transform: translate(0, -40%)**_;” in your module:

 ![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/c/7/c7a511f3405b7c47926901627cafa4b17ac26711.png)

After remove this customization, will work perfectly. Look:

 ![footer-correct.PNG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/9/5/956f0c30d27cb13ed0fb3adb8f93860cf7f5289b.png)

Negative values are very harmful on mobile if they are not made with conditions for mobile devices.

In your case you can remove that will solve.

Did this post help solve your problem? If so, please mark it as a solution.

Best Regards! 🙂

---

<div class="post-metadata">

**Author:** ![dchambers](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dchambers/32/44643_2.png) [@dchambers](https://community.hubspot.com/u/dchambers)\
**Post date:** [December 3, 2019, 4:16am UTC](https://community.hubspot.com/t/footer-spacing/17512/3 "2019-12-03T04:16:38Z")

</div>

When I do that, the footer in the inner pages moves to the bottom of the section. I added that to try to get them all identical.

Here is a link to an inner page. When you go back to the homepage, you can see the difference.

> **[Adhesive Film Tape | Adhesive Solutions | Strouse](https://www.strouse.com/materials/adhesive-film-tape)**
>
> Strouse converts adhesive films into usable parts for manufacturers. Film tape components can be die cut on a roll, as sheeted parts, or individual pieces.

 ![Footer - inner pages.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/7aca3d9535ef5e516dac2ee760bbb8489c711af8.jpeg)

---

<div class="post-metadata">

**Author:** ![DanielSanchez](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/danielsanchez/32/48193_2.png) [@DanielSanchez](https://community.hubspot.com/u/DanielSanchez)\
**Post date:** [December 3, 2019, 12:15pm UTC](https://community.hubspot.com/t/footer-spacing/17512/4 "2019-12-03T12:15:07Z")

</div>

Hi @dchambers ,

Change your _ **.site-footer** css code_ for this code:

```auto
.site-footer {
 padding: 3.4375em 0;
 vertical-align: middle;
 width: 100% !important;
 float: left!important;
 max-width: 1600px;
 margin: auto !important;
}

.site-footer div.contact-side {
 text-align: center;
}

```

Did this post help solve your problem? If so, please mark it as a solution.

Best Regards!

---

<div class="post-metadata">

**Author:** ![dchambers](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dchambers/32/44643_2.png) [@dchambers](https://community.hubspot.com/u/dchambers)\
**Post date:** [December 3, 2019, 2:29pm UTC](https://community.hubspot.com/t/footer-spacing/17512/5 "2019-12-03T14:29:57Z")

</div>

```auto
.site-footer {
 padding: 3.4375em 0;
 vertical-align: middle;
 width: 100% !important;
 float: left !important;
 max-width: 1600px;
 margin: auto !important; }
 @media (max-width: 499px) {
 .site-footer .contact-bar {
 font-size: 10px !important;
 width: 27.7rem !important;
 vertical-align: middle; }
 .site-footer .contact-bar .call-us {
 border-right: 0; }
 .site-footer .contact-bar .social-links {
 width: 82% !important; }
 .site-footer .contact-bar .email-us {
 padding-top: 1.375em !important;
 padding-bottom: 1.3125em !important; }
 .site-footer .contact-bar:after {
 border-top: 2px solid #454545;
 height: 2px;
 width: 100%;
 content: '';
 display: block;
 position: absolute;
 top: 3.9rem !important; } }
 @media (min-width: 500px) and (max-width: 991px) {
 .site-footer .contact-bar {
 width: 38.4rem !important;
 font-size: 14px !important; }
 .site-footer .contact-bar .call-us {
 border-right: 0; }
 .site-footer .contact-bar .social-links {
 width: 82% !important; }
 .site-footer .contact-bar:after {
 border-top: 2px solid #454545;
 height: 2px;
 width: 100%;
 content: '';
 display: block;
 position: absolute;
 top: 5.9rem; } }
 @media (max-width: 1450px) {
 .site-footer {
 padding: 3.125em 0; }
 .site-footer div.address, .site-footer div.contact-side {
 width: 100% !important;
 display: block;
 text-align: center !important;
 margin: 0 !important; }
 .site-footer div.contact-side .contact-bar {
 margin: auto !important;
 margin-top: 1.5625em !important; } }
 .site-footer address {
 font-size: 1em;
 font-weight: 400;
 line-height: 1.25;
 letter-spacing: 0.078125em;
 padding-bottom: 0.75em;
 color: white;
 border-bottom: 2px solid #454545;
 margin-top: 1.5625em;
 margin-bottom: 0.375em;
 text-align: left;
 display: inline-block;
 width: auto; }
 @media (max-width: 767px) {
 .site-footer address {
 text-align: center; } }
 .site-footer div.contact-side {
 text-align: center; }
 .site-footer div.contact-bar {
 border: 2px solid #454545;
 text-align: right;
 display: inline-block;
 width: auto;
 position: relative; }
 .site-footer div.contact-bar div {
 display: inline-block;
 text-align: center;
 vertical-align: top;
 border-right: 2px solid #454545; }
 .site-footer div.contact-bar div a {
 color: white; }
 .site-footer div.contact-bar div a:hover {
 text-decoration: none; }
 .site-footer div.contact-bar div:last-child {
 border-right: 0; }
 .site-footer div.contact-bar div.email-us {
 background-color: rgba(69, 69, 69, 0.7);
 padding: 1.46875em 1.4375em;
 float: left; }
 .site-footer div.contact-bar div.email-us a {
 font-size: 1.125em;
 line-height: 1.2222222222;
 letter-spacing: 0.3333333333em;
 font-weight: bold;
 text-transform: uppercase; }
 .site-footer div.contact-bar div.call-us {
 padding: 1.125em 2.1875em; }
 .site-footer div.contact-bar div.call-us a {
 font-size: 1.625em;
 line-height: 1.2307692308;
 letter-spacing: 0.0623076923em;
 font-weight: 400;
 color: white; }
 .site-footer div.contact-bar div.social-links {
 padding: 1.1875em 2.5em; }
 .site-footer div.contact-bar div.social-links ul {
 list-style-type: none;
 margin: 0;
 padding: 0; }
 .site-footer div.contact-bar div.social-links ul li {
 display: inline-block;
 padding-left: 0.6875em;
 padding-right: 0.6875em; }
 .site-footer div.contact-bar div.social-links ul li a {
 opacity: 1;
 -webkit-transition: 0.25s opacity ease-in-out;
 transition: 0.25s opacity ease-in-out; }
 .site-footer div.contact-bar div.social-links ul li a:hover {
 opacity: 0.75; }
 .site-footer div.contact-bar div.social-links ul li:before {
 display: none; }
 .site-footer div.contact-bar div.social-links ul li:first-child {
 padding-left: 0; }
 .site-footer div.contact-bar div.social-links ul li:last-child {
 padding-right: 0; }
 .site-footer div.contact-bar div.sitemap {
 padding: 0.75em 1.0625em;
 text-align: left; }
 .site-footer div.contact-bar div.sitemap a {
 font-size: 1em;
 line-height: 1.1;
 letter-spacing: 0; }

```

The vertical alignment is better with that change, but they are now positioned to the left in the windows display. It also looks like it removed the black background in the

 ![Mobile Display.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/e/de1b3c8738591540d0082033fd22abb51b19e96b.png)  
mobile display.

 ![Windows Display.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/b/fb880691691623f1318686c9db9f353f244fb15c.png)

---

<div class="post-metadata">

**Author:** ![DanielSanchez](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/danielsanchez/32/48193_2.png) [@DanielSanchez](https://community.hubspot.com/u/DanielSanchez)\
**Post date:** [December 3, 2019, 5:09pm UTC](https://community.hubspot.com/t/footer-spacing/17512/6 "2019-12-03T17:09:05Z")

</div>

Hi @dchambers

Then remove this code that i saw to insert, for your contact content return to right align.

```auto
.site-footer div.contact-side {
 text-align: right;
}

```

Here, the background continuous black. Look:

 ![mobile.PNG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/c/3c44b214c58dffe674ece822f435af428165899a.png)

Did this post help solve your problem? If so, please mark it as a solution.

Best regards! 🙂

---

<div class="post-metadata">

**Author:** ![DanielSanchez](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/danielsanchez/32/48193_2.png) [@DanielSanchez](https://community.hubspot.com/u/DanielSanchez)\
**Post date:** [December 5, 2019, 2:46pm UTC](https://community.hubspot.com/t/footer-spacing/17512/7 "2019-12-05T14:46:03Z")

</div>

Hi @dchambers ,

Can we solve it?

Please mark as resolved if yes, or state what is missing, and we will try to help.

Best regards!