Footer doesn't stack properly on mobile

[rivercross]

Hi, I am having issues with a simple footer. When stacked for mobile, the title and content does not justfi-left completely. I would like them to stack on top instead of pushing out to the right. Please advise.

the website is rivercrosswindowcleaning.com

[jade]

Hi there,

Please add this code in the custom CSS:

@media (max-width: 979px) {
    .x-colophon .widget {
        float: left;
    }
}

Hope this helps.

[rivercross]

That worked for one logo, but now this happens at a certain break.

[friech]

Hi There,

The footer columns are responsive by default, they stack to each other on mobile. Please remove all the custom CSS you applied to the footer, including the one provided above.

The issue is in your second column’s markup, please update that to this:

<div class="guarantee-wrapper">
  <img class="guarantee-seal" src="https://rivercrosswindowcleaning.com/wp-content/uploads/2017/11/satisfaction-rivercross.png" alt="">
  <span class="guarantee-text">I offer a 100% Satisfaction Guarantee in addition to my Rainy Day Guarantee.</span>
</div>

Then use this custom CSS to position the seal and text side-by-side.

.guarantee-seal {
	float: left;
    max-width: 30%;
    margin-right: 4%;
}

.guarantee-text {
	float: left;
    width: 66%;
}

Just have that for now, and we’ll provide additional custom CSS if necessary.

Thanks,

[rivercross]

Hi Friech,

That doesn’t seem to be working too well. Can you take a look? https://rivercrosswindowcleaning.com

[paul.r]

Hi,

Please add this code as well.

@media (max-width: 979px) {
.x-colophon.top .x-column.x-md {
    clear: both;
}

.x-colophon.top img {
   max-width:100%;
}
}

Thanks