Formatting the footer

[billy.rooney]

Hi Guys,

I was hoping you would be able to help me with regard to a footer issue I’m having.

I’m looking to achieve the attached effect for the footer. I’m trying to achieve the following:

1: Increase the top padding on footer area in desktop view, and have all the content sit toward the bottom of the footer area.

2: Reduce the size of the text to about 10px and have the the right hand text widget left align.

3: In Tablet and mobile to reduce the padding between widget 2 & 3

4: In mobile and table view to have all the text centre align

5: In widget four to have a little bit of padding at the top so it’s almost to the centre of the flag.

Would you be able to offer any assistance? I’m kinda stuck!

Thanks a million in advance.

[thai]

Hi There,

Please add the following CSS under Theme Options > CSS:

footer.x-colophon.top {
    padding-top: 100px;
    padding-bottom: 0;
}
footer.x-colophon.top .custom-font-size {
    margin-bottom: 5px;
}

#text-6 {
    text-align: left;
    font-size: 12px;
    padding: 20px 0;
}

#top > footer > div > div:nth-child(2) {
    width: 30%;
    margin-right: 1%;
}
#top > footer > div > div:nth-child(3) {
    width: 15%;
}

@media (max-width: 767px){
    footer.x-colophon.top {
        padding-top: 40px;
    }
    .x-colophon.top .x-column.x-md.x-1-4 {
        width: 100% !important;
    }
    footer.x-colophon.top .textwidget p {
        text-align: center !important;
    }
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Hope that helps and thank you for understanding.

[billy.rooney]

@thai

footer.x-colophon.top {
padding-top: 100px;
padding-bottom: 0;
}
footer.x-colophon.top .custom-font-size {
margin-bottom: 5px;
}

#text-6 {
text-align: left;
font-size: 12px;
padding: 20px 0;
}

#top > footer > div > div:nth-child(2) {
width: 30%;
margin-right: 1%;
}
#top > footer > div > div:nth-child(3) {
width: 15%;
}

@media (max-width: 767px){
footer.x-colophon.top {
padding-top: 40px;
}
.x-colophon.top .x-column.x-md.x-1-4 {
width: 100% !important;
}
footer.x-colophon.top .textwidget p {
text-align: center !important;
}
}

That is so helpful, and it did the trick, thank you so much! There’s just one follow up issue if you don’t mind. There’s seems to be a break point between desktop and table where the left hand image widget centers and the other widgets are left aligned. Is there a way to have it that if there isn’t enough room in the footer for all four widgets horizontally, that they stack and centre horizontally?

[basanta]

Hi There,

Thanks for writing in again!

Please update the media query CSS with this.

@media ((max-width: 979px){
    footer.x-colophon.top {
        padding-top: 40px;
    }
    .x-colophon.top .x-column.x-md.x-1-4 {
        width: 100% !important;
    }
    footer.x-colophon.top .textwidget p {
        text-align: center !important;
    }
}

Hope this helps!

[billy.rooney]

Thank you so much for helping me out here, although when I paste that code in I’m getting errors:

[rad]

Hi @billy.rooney,

There was a typo error, please change it to this

@media (max-width : 979px) {
    footer.x-colophon.top {
        padding-top: 40px;
    }
    .x-colophon.top .x-column.x-md.x-1-4 {
        width: 100% !important;
    }
    footer.x-colophon.top .textwidget p {
        text-align: center !important;
    }
}

Thanks!