Topic: 5 columns in footer and centering images

Tagged: x

Author

Posts
June 20, 2016 at 6:01 pm #1051519

meschwa
Participant

http://www.leadingedgeparenting.com

I am using this code in the footer to get the columns but it will only show 4, not 5

[x_block_grid type=”five-up”]

I’d also like the images to be centered both horizontally and vertically because there are so many and they are varying sizes it would look cleaner.

Can you tell me how to ‘absolute zero’ center the images in the footer? I have scoured the internet and cannot find a simple code to paste…

Thank you!!!

June 21, 2016 at 12:47 am #1051995

Lely
Moderator

Hi There,

Thanks for posting in.
To center images, please add center-text class on the image column class field.
To center it vertically, we can add GAP element on top of the image.
We’re sorry for the confusion regarding block grid, maximum columns are now 4 only. To use five columns please try using columns shortcode instead:http://theme.co/x/demo/renew/1/shortcodes/columns/

Hope this helps.

June 21, 2016 at 1:21 am #1052018

meschwa
Participant

I’m hoping you can clarify… it sounds like there is no way to align vertically and horizontally and instead I need to manually figure out the gap for each image?

Surely there must be an easier way? Rather than adding a gap element I could recreate and center each logo in a 200×200 square image… that would be much more work…

Is there no way to add to the css to center both vertically and horizontally?
Thanks again!

June 21, 2016 at 2:10 am #1052069
Lely
Moderator
Hi There,

From your current setup, try adding the following custom CSS on Appearance > Customize > Custom > Edit Global CSS:
```
.x-colophon.top li.x-block-grid-item {
    height: 220px;
    position: relative;
}
.x-colophon.top li.x-block-grid-item img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
```
Above CSS will add maximum image height which is 220px. See attached image for the result.
June 21, 2016 at 11:17 pm #1053730

meschwa
Participant

THANK YOU!!! Miracle workers 🙂 That totally did the trick!!

(The columns shortcode didn’t seem to work, it created columns instead of rows… all good, now that the logos are centered properly they look less overwhelming anyway!)

June 21, 2016 at 11:42 pm #1053754

Prasant Rai
Moderator

Thanks for the good words. Feel free to get in touch with us regarding any further queries.
Author

Posts

<script> jQuery(function($){ $("#no-reply-1051519 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>