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.
Hi @dchambers
Remove the CSS inline “transform: translate(0, -40%);” in your module:
After remove this customization, will work perfectly. Look:
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! 
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!
.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.
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:
Did this post help solve your problem? If so, please mark it as a solution.
Best regards!
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!