Docs

[hwolfe]

I have four footer widgets and need to have “About” and “Services” line up on the smaller screen sizes. Can you help?

Thank you!

[hwolfe]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

@media only screen and (min-width: 481px) and (max-width: 979px) {
footer.x-colophon.top {
	padding-top: 45px;
}
.x-colophon.top .x-column .widget:first-child {
	margin-top: 0 !important;
}
}

Hope this helps.

Cheers!

[hwolfe]

That’s awesome! One last tweak – can we increase the space between the “Info” and “Contacts” menus and the upper two menus? So the link for “Hay” is not right on top of “Contacts”.

Thank you!!

[Jade]

Hi there,

Please update the code provided previously to:

@media only screen and (min-width: 481px) and (max-width: 979px) {
    footer.x-colophon.top {
	padding-top: 45px;
    }
    .x-colophon.top .x-column .widget:first-child {
    	margin-top: 0 !important;
    }

    footer.x-colophon.top .x-column.last {
    	padding-left: 50px;
    }
}

Hope this helps.

[hwolfe]

Unfortunately, that just pushed that column to the right. ” (

[Lely]

Hi There,

Please adjust this custom CSS:

@media only screen and (min-width: 481px) and (max-width: 979px) {
footer.x-colophon.top {
	padding-top: 45px;
}
.x-colophon.top .x-column .widget:first-child {
	margin-top: 0 !important;
}
}

To this:

@media only screen and (min-width: 481px) and (max-width: 979px) {
footer.x-colophon.top {
	padding-top: 45px;
}
.x-colophon.top .x-column .widget:first-child {
       margin-top: 0 !important;
}
.x-column.x-md.x-1-4:nth-child(3), .x-column.x-md.x-1-4:nth-child(4) {
       margin-top: 50px;
}
}

On that screensize, we have added a 50px top margin on 3rd and 4rth column where INFO and CONTACT is located.

Hope this helps.

[Author]

Posts