.x-colophon.top widget issues with BG color and alignment

Support
#1

Hello,

When I look at my website under 768 pixel width the .x-colophon.top background color changes to white.
Any idea why? I have this code:

.x-colophon.top {
background-color: #000000;
}

footer.x-colophon.top {
color: #ffffff !important;
background-color: black! important;
}

Which works on desktop widths.

And then I’m also trying to make it so the widgets (when stacked on mobile) are centered to the page.
I haven’t figured out how to make that work, any suggestions?

I’m using this code to affect the widths of the columns on desktop and thought i had the mobile one figured out, but don’t.

footer.x-colophon.top .x-column.x-1-4:nth-child(1) {
width: 20%;
}

footer.x-colophon.top .x-column.x-1-4:nth-child(2) {
width: 37%;
}

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

footer.x-colophon.top .x-column.x-1-4:nth-child(4) {
width: 14%;
}

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

Thank you!

Jesse

#2

Basically, I want the background to be BLACK regardless of screen width and the text to be white, as i noted in the code. And I want the widgets to be centered horizontally (left-aligned) with a max width of 50%.

#3

Hi Jesse,

I checked you site and the code that you have added to set the color of the top footer area is in a media query block that takes effect only for device width from 960px and up:

So kindly make sure to move the code out of the media query block so that it will take effect for all screen sizes.

Hope this helps.

#4

The only place I use the media block is to try to change the widget width and alignment on mobile devices. I don’t use it anywhere in my code for color. So i’m not sure what you’re looking at here.

I want the background to be BLACK regardless of screen width and the text to be white, as i noted in the code. And I want the widgets to be centered horizontally (left-aligned) with a max width of 50% below 980 pixel width.

#5

Hey Jesse,

You seem to insert a broken css:

@media only screen and (min-width:960px){
    .x-colophon.bottom .x-colophon-content{
        float:left;
        width:50%;
    }
    .x-colophon.bottom .x-nav{
        float:right;
        width:40%;
        margin-top:5px;
    }
    .x-colophon.bottom{
        color:#FFF;
    }
    .x-colophon.bottom{
        padding:20px 0px 10px 0px;
    }
    @media only screen and (max-width:960px){
        .x-colophon.bottom .x-colophon-content,.x-colophon.bottom .x-nav{
            float:none;
            width:100%;
        }
    }

The correct code should be this:

@media only screen and (min-width:960px){
    .x-colophon.bottom .x-colophon-content{
        float:left;
        width:50%;
    }
    .x-colophon.bottom .x-nav{
        float:right;
        width:40%;
        margin-top:5px;
    }
    .x-colophon.bottom{
        color:#FFF;
    }
    .x-colophon.bottom{
        padding:20px 0px 10px 0px;
    }
}

@media only screen and (max-width:960px){
    .x-colophon.bottom .x-colophon-content,.x-colophon.bottom .x-nav{
        float:none;
        width:100%;
    }
}

Hope this helps.

#6

ok, that appears to have been what was causing the background coloring issues.
Thank you!

Now, is there anything that will horizontally center the widgets below 980 width?
They are all on the same line, with a width of 75, but float center doesn’t do anything.

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

#7

Hey Jesses,

There is no float: center;. You might want to update it and use this:

@media only screen and (max-width: 979px) {
  footer.x-colophon.top .x-column.x-md {
    width: 75% !important;
    margin-left: auto;
    margin-right: auto;
  }
}

Please let us know if this works out for you.

#8

OK, that mostly worked, thank you!
I also threw in a text-align center, and that did it perfect.

#9

Glad to hear it’s sorted, Jesse.

#10

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