Docs

[thelistener]

Hi there!
Through some non-responsive (old school) code editing, I was able to make the footer of the site I’m working on look aligned. However, when I view the site on my phone, the position of the images is all screwed up. I need the images to align centered to each other on mobile, but look just the way it does now on desktop/laptop with the images in the second and third widgets flush to the bottom so that it’s horizontally aligned with the bottom of the contact text in the first widget. I need some help with this ASAP and appreciate any help you can provide!

Here’s the site I’m working on.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

@media (max-width:767px){
.x-colophon.top img {
    margin: 0 auto;
    display: block;
}
footer.x-colophon.top #text-5 p:first-of-type, footer.x-colophon.top #text-5 p:nth-of-type(2), footer.x-colophon.top #text-6 p:first-of-type, footer.x-colophon.top #text-6 p:nth-of-type(2) {
    display: none;
}
}

Hope it helps.

[thelistener]

Thank you so much! Works like a charm!!!!!!!!!! This is why I love X!!!!

[Joao]

You are welcome.

[thelistener]

Hi there! I hate to do this, but my client requested some changes and now the width and height between images in the footer is all wrong.

Here’s what the footer widgets are supposed to look like
DESKTOP: https://dl2.pushbulletusercontent.com/nIuYEQ5C4ofAvdKmDpriLmBniIofvcYf/halcyon-footer-desktop-screenshot.png
MOBILE: https://dl2.pushbulletusercontent.com/Be1Th6TYLbtCyTdn1Nz81CbBhVCFcQRY/halcyon-footer-mobile-screenshot.png

Also, the vertical spacing between the lines in the first widget are all off. Can we make them uniform somehow???

[thelistener]

This reply has been marked as private.

[Christopher]

Hi there,

Please update your code in footer 2 widget area :

<p class="lato-light" align="center"><span style="color:#046380; font-size:24px;font-weight:400;">SALES TEAM</span><img src="http://becreativestudios.com/halcyon/wp-content/uploads/2016/04/srg-logo.jpg" alt="Logo"></p>

Please add this :

@media (min-width:767px){
div#text-5, div#text-6 {
    margin-top: 90px;
}
}

Hope it helps.

[Author]

Posts