Docs

[marketing@transloc.com]

Hey there folks,

We have the same issue outlined here (https://community.theme.co/forums/topic/responsive-footer). The footer has 3 widget sections and we would like it to progressively get smaller (3 down to 2 down to 1) instead of going from 3 to 1 when making the viewport smaller.

I see in the old topic referenced above you have some custom css to fix this, but I just want to make sure I have the latest and greatest info.

Thank you!

[marketing@transloc.com]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! It seems the mentioned thread already contains the correct answer. You can use the solution – https://community.theme.co/forums/topic/responsive-footer/#post-689386

Just make sure you are using the right min-width and max-width range that you actually want or change them according to your need.

Hope this helps.

Cheers!

[marketing@transloc.com]

Hi there,

Thanks for your prompt reply. I copied the following code snippet from the post referenced above and I can’t make it work. It still goes from 3 side by side widgets down to 1 (stacked on top) without ever getting to 2 side by side widgets. I wonder if this has something do with us having 3 widgets instead of the previous poster who had 4 widgets.

@media (max-width: 979px) and (min-width: 435px){
.x-column.x-md {
    float: left;
    width: 50%;
}
.x-colophon.top .x-column .widget:first-child {
    margin-top: 3em;
}
}
@media (max-width: 435px){
.x-column.x-md {
    float: none;
    width: 100%;
}
}

Thanks!

[Paul R]

Hi,

You can try this code instead.

@media (max-width: 979px) {
    .x-colophon.top {
        text-align:center;
    }
    .x-colophon.top .x-column.x-1-3 {
          width: 48%;
          float:none;
          display:inline-block;
          vertical-align:top; 
    }

    .x-colophon.top .x-container .x-column.x-1-3:nth-child(2) {
              margin-right:0;
    }

}

@media (max-width: 767px) {
    .x-colophon.top {
        text-align:center;
    }
    .x-colophon.top .x-column.x-1-3 {
          width: 100%;
          float:none;
          display:inline-block;
          vertical-align:top; 
          margin-right:0; 
    } 
}

Hope that helps

[marketing@transloc.com]

Hi there, I’m not sure why but I can’t get this code to work either. It goes from 3 widgets to 1 still. What should I do?

[Christopher]

Hi there,

There is syntax mistake in your CSS, please check following code and you’ll noticed you’ve closed curly bracket for media query twice :

@media (max-width: 979px) {

.masthead-stacked .x-btn-navbar {
    position:absolute;
    right:20px;
    top: -50px;
}

.masthead-inline .x-btn-navbar {
    position:absolute;
    right:20px;
    top: 20px;
}

.x-topbar {
display: none;
}

.x-navbar.x-navbar-fixed-top {
        position: fixed;
    }
}
.x-navbar-wrap .x-container-fluid.width {
    width:100%;
}

.masthead.masthead-stacked .x-navbar-wrap {
    width:100%;
    margin-right:0;
}

.x-navbar-inner {
   min-height:0;
}
}

Please fix this code and check your site again.

Thanks.

[marketing@transloc.com]

Hi there,

Thanks so much for your response. I’ve tried your code (from your last response above) WITHOUT the extra bracket and that did not make any difference. I even had my developer colleague look at the code to make sure. Then I went back to your previous code (from Paul R’s response above) – this one has 2 media queries (not sure why there are 2 different sets of code snippets but somewhere along the way, the second media query disappeared) and made sure the brackets were correct. This made no difference either. The widgets still go from 3 side by side, down to 1 stacked on top of each other, without every going to 2 side by side.

Do you have any further recommendations?

Thanks!

[Lely]

Hi There,

Upon checking the CSS code, there’s still an extra closing bracket. Please remove it. See the attached screenshot on where it is.

Hope this helps,

[marketing@transloc.com]

Thank so much. I must have been tripping with my last reply because for some reason, I didn’t get that you were pointing out an extra bracket on our EXISTING code not on the new code you supplied. My brain just kept seeing them as the same thing.

Much appreciated. I have removed the extra bracket from our existing code, and with your code supplied above, the footer now stacks properly from 3 to 2 to 1 widget.

As always, you all ROCK!

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts