CMS Development

dchambers
Contributor

Footer Spacing

SOLVE

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/

0 Upvotes
1 Accepted solution
DanielSanchez
Solution
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

Footer Spacing

SOLVE

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

View solution in original post

6 Replies 6
DanielSanchez
Solution
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

Footer Spacing

SOLVE

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

dchambers
Contributor

Footer Spacing

SOLVE

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

0 Upvotes
DanielSanchez
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

Footer Spacing

SOLVE

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!

 

0 Upvotes
dchambers
Contributor

Footer Spacing

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

0 Upvotes
DanielSanchez
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

Footer Spacing

SOLVE

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

 

 

0 Upvotes
DanielSanchez
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

Footer Spacing

SOLVE

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!

0 Upvotes