Docs

[TheoryUnit]

Hi there,

I’m working on a site at: http://ancientmesopotamiasoap.com with the Integrity stack (I’ll post the login credentials in the next post).

I have three issues with the footer which I’m struggling to resolve:

1) I’ve put three widgets in the footer and I’m trying to position the middle widget so it’s exactly central, horizontally. You can see it’s a little off at the moment.

2) When viewed on mobile, the menu titles in widget 1, don’t display fully

3) Also on mobile, the widgets aren’t horizontally central. Could you please help?!

Many thanks,
Matt

[TheoryUnit]

This reply has been marked as private.

[Darshana]

Hi there,

Upon checking, I see that you have added custom CSS rules into your site which results the current appearance of your widgets. Refer to the screenshot here when I checked your widgets (https://snag.gy/k9iqE2.jpg).

footer.x-colophon.top .x-column:first-of-type, footer.x-colophon.top .x-column:last-of-type {
    margin-top: -13px;
    padding-top: 0;
}

footer.x-colophon.top .x-column:first-of-type, footer.x-colophon.top .x-column:last-of-type {
    width: 20%;
}

footer.x-colophon.top .x-column:nth-of-type(2) {
    width: 60%;
}

footer.x-colophon.top .x-column:first-of-type, footer.x-colophon.top .x-column:last-of-type {
    margin-top: -13px;
    padding-top: 0;
}

footer.x-colophon.top .x-column:first-of-type, footer.x-colophon.top .x-column:last-of-type {
    width: 20%;
}

You will need to adjust your custom CSS rules according to your requirement.

Thanks!

[TheoryUnit]

Hi there,

Thanks for that, but it didn’t fix the issues I’m having (though it did tidy up my code!):

— On desktop, the text in widget 2 I’m trying to centre horizontally (it’s off to the right compared to the main nav menu for some reason).

— On mobile, the widget 1 menu is aligned left and the text is cropped — I’m trying to align it centrally.

— On mobile, widget 2 is aligned left — I’m trying to align it centrally also.

Your help greatly appreciated!Thanks.
Matt

[TheoryUnit]

Edited above so deleted this post.

[Jade]

Hi Matt,

Would you mind providing some screenshots about the issue that you are currently having because I am not that certain at the moment about the sections you are describing since the footer area is divided into top and bottom section. Thank you.

[TheoryUnit]

Hi Jade,

Thanks for your reply. Please see attached screenshots.

1 — shows a desktop view of the footer and you can see the text in widget 2 isn’t aligned in the centre horizontally relative to the nav menu above.

2 – shows a mobile view of the footer with widget 1 aligned left when I’d like it central and also the menu item text is cropped off and widget 2 is also aligned left, when I’d like it central.

Many thanks,
Matt

[Nico]

Hi There,

For mobile problem, try adding this code:

@media (max-width: 979px){
footer.x-colophon.top .x-column:first-of-type, footer.x-colophon.top .x-column:last-of-type {
    width: 20%;
}

footer.x-colophon.top .x-column:nth-of-type(2) {
    width: 60%;
}
}

And for the desktop:

Try adjusting this code that you have added:

footer.x-colophon.top .x-column:first-of-type, footer.x-colophon.top .x-column:last-of-type {
    width: 20%;
}

try 17%

Let us know how it goes.

Thanks.

[TheoryUnit]

Hi Nico,

Thanks for that — changing the width of the widgets worked brilliantly so that’s the desktop issue sorted — thank you.

For mobile, I changed the widths so the text isn’t cropped off anymore, but the widgets are still aligned left — I’d really like them to be aligned centrally if possible, one on top of the other. Is that doable?

I’ve attached a screenshot of how it looks on mobile.

Many thanks, as ever,
Matt

[Thai]

Hi There,

Please add the following CSS:

@media (max-width: 979px){
    .x-colophon.top .x-column.x-md.x-1-3 {
        width: 100%
    }
}

http://i.imgur.com/5zaafW3.png

Hope it helps 🙂

[TheoryUnit]

Perfect! Thanks so much.
Matt

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts