Footer Widgets Appear Below Footer Content/Nav

Support
#1

Hello,

You all helped me change the format of the Footer Contents and Nav.
But i think it also changed the way widgets show up.
They are showing up below the footer contents/nav instead of above it.
Can you help me with getting the widgets above the base nav?
And with a little padding and ECECEC background color?

Jesse

#2

I’d also like to change the widths of the footer widgets so the first one is 1/2 and the other three are 1/6 width.
Figured I;'d throw that in this same thread.

#3

Hi Jesse,

It is because of this custom CSS. Please remove it.

.x-colophon.top {
    position: absolute;
    width: 100%;
}

Add this instead:

.x-colophon.top {
    background: #ECECEC;
}

Please try adding this:

footer.x-colophon.top .x-column.x-1-3 {
    width: 22.995%;
}
footer.x-colophon.top .x-column.x-1-3:nth-child(1) {
    width: 45.99%;
}

Result should be like this:

The border was just added to show you column size.

Hope this helps.

#4

I remove the code, added both other codes, but the width adjustment one doesn’t appear to have worked.
Any ideas why?

#5

Hi Jesse,

That is probably CSS syntax error. For example, look for this part where closing } for media query is missing.

@media only screen and (min-width:960px) {

.x-navbar-inner {
    min-height: 90px;
}

Please double check all your custom CSS. Make sure that brackets are partnered.

#6

that code doesn’t exist in my luminacbd.com custom CSS. Where do you see that code? I’ve looked, and i have nothing that uses the word “inner”

#7

Nevermind, i figured it out, the code you sent was for Three widgets not Four. Good to go!

#8

How do you make it so each widget is full-width on mobile?
I changed it around to look fine on desktop, but on mobile it keeps the same % widths and looks awful.

#9

Hello Jesse,

Thanks for updating the thread. :slight_smile:

Please add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
  footer.x-colophon.top .x-column.x-md {
    width: 100%;
}
}

Thanks.

#10

It looks much better on mobile, but the first widget appears to still only be using half width.

#11

Hello Jesse,

Please update the code given by Prasant and use this:

@media only screen and (max-width: 600px) {
  footer.x-colophon.top .x-column.x-md {
    width: 100% !important;
  }
}

We would love to know if this has worked for you. Thank you.

#12

Thank you! That worked!

#13

You’re always welcome Jesse!

If you have other inquiry, please open a new thread.

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.