Docs

[jdfrizzell]

Hello,

I have a number of sponsor images that I would like to each have centered within their respective rows and columns so that they look more even.

My page is:
acappellaeducators.com

It is almost to the bottom of the page where this occurs.
Thanks!

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.home #x-section-6 .x-column.x-sm.x-1-4 {
    white-space: nowrap;
    height: 150px;
}
.home #x-section-6 .x-column.x-sm.x-1-4:before {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    content: "";    
}
.home #x-section-6 .x-column .x-img {
    margin-bottom: 0;
    vertical-align: middle;
    max-height: 145px;    
}

Hope it helps 🙂

[jdfrizzell]

Perfect, thank you!

[Rue Nel]

You are most welcome!

[jdfrizzell]

Hi!

So this worked to horizontally align the images, but not vertically. Is there a way to do that?

Also, it makes the top row of logos disappear on mobile for some reason.

Thanks,
JD

[Joao]

Hi There

Update this:

.home #x-section-6 .x-column.x-sm.x-1-4 {
    white-space: nowrap;
    height: 150px;
}

to this

.home #x-section-6 .x-column.x-sm.x-1-4 {
    white-space: nowrap;
    height: 150px;
    text-align: center;
}

Hope that helps

Joao

[Author]

Posts