Footer Spacing

Highlighted
New Contributor

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.

 

https://www.strouse.com/

Reply
0 Upvotes
6 Replies 6
Esteemed Contributor | Platinum Partner

Hi @dchambers 

 

Remove the CSS inline "transform: translate(0, -40%);" in your module:

 

remove-transform.PNG

 

After remove this customization, will work perfectly. Look:

 

footer-correct.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! Smiley Happy

Daniel Sanchez
https://www.na5.com.br/
https://www.linkedin.com/in/danielbsanchez/
New Contributor

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.

 

https://www.strouse.com/materials/adhesive-filmFooter - inner pages.jpg

Reply
0 Upvotes
Esteemed Contributor | Platinum Partner

Hi @dchambers ,

 

Change your .site-footer css code for this code:

 

 

.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!

 

Daniel Sanchez
https://www.na5.com.br/
https://www.linkedin.com/in/danielbsanchez/
Reply
0 Upvotes
New Contributor
.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.pngmobile display.

Windows Display.png

Reply
0 Upvotes
Esteemed Contributor | Platinum Partner

Hi @dchambers 

 

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

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

Here, the background continuous black. Look:

 

mobile.PNG

 

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

Best regards! Smiley Happy

 

 

Daniel Sanchez
https://www.na5.com.br/
https://www.linkedin.com/in/danielbsanchez/
Reply
0 Upvotes
Esteemed Contributor | Platinum Partner

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!

Daniel Sanchez
https://www.na5.com.br/
https://www.linkedin.com/in/danielbsanchez/
Reply
0 Upvotes