Responsive Footer Issue, 3 widget columns stack on tablet when nothing else does

[a_buzon]

Hello,
I’m using the Renew stack and my 3 column footer is breaking and stacking @ 979px instead of @767px like the rest of the site.

I’ve used the following CSS to keep this from happening, but can you tell me if this is indeed the best way to go about it? It works, but it seems rather clunky.

The site is http://dev.thehelpfulmarketer.com/

@media (max-width: 767px){
     .x-column.x-md {
        float:none;
        width:100%;
        margin-right:0;
  }
      }

@media (min-width: 768px) {
.x-colophon .x-column.x-1-3.x-md {
    width:30.66666% !important;
    position: relative;
    z-index: 1;
    float: left;
    margin-right: 4%;
}
        }

@media (min-width: 768px) {
 .x-colophon .x-column.x-1-3.last {
    width:30.66666%;
    position: relative;
    z-index: 1;
    float: left;
    margin-right: 0%;
}
.x-colophon.top .x-column .widget:first-child {
    margin-top: 0em;
  }
        }

Thank you!

[christian]

Hey @a_buzon,

You would only need this snippet to prevent the footer columns from stacking @ 979px. See how it working here.

@media (min-width: 767px) {
    .x-colophon .x-column.x-md {
        width: 30.66666%;
        float: left;
        margin-right: 4%;
    }
    .x-colophon .x-column.last, .x-column:last-of-type {
        margin-right: 0;
    }
}

Just note that the code I’ve provided serves only as a guide. Fixing issues that might arise from the use of the code and further enhancements would be outside the scope of our support.

Hope that helps and thank you for understanding.

[a_buzon]

THANK YOU! That’s much less clunky!

[a_buzon]

For reference for anyone else looking to do this, if you don’t want the 2nd and 3rd footer columns to have the top margin that remains from the stacking, you’ll need to add this:

.x-colophon.top .x-column .widget:first-child {
    margin-top: 0em;
  }

So in full, the code is:

@media (min-width: 767px) {
.x-colophon .x-column.x-md {
    width: 30.66666%;
    float: left;
    margin-right: 4%;
}
.x-colophon .x-column.last, .x-column:last-of-type {
    margin-right: 0;
}
.x-colophon.top .x-column .widget:first-child {
	margin-top: 0em;
}}

[jade]

You’re most welcome and thanks for sharing your solution.

Cheers!