Vertical align image on smaller screens

[logoglo]

Hi there, see:

https://www.logoglo.com/new-home/

I want to align the image further down the page, to be centered vertically on all screens…

Thanks.

[nabeel]

Hi @logoglo,

Thank you for reaching out to us. To vertically center the content in a section, simply assign a class vertical-align to your content band that has the image and then add the following code in the Theme Options > CSS:

@media screen and (min-width: 768px) {
    .vertical-align {
        display: table !important;
    }

    .vertical-align .x-column {
        display: table-cell !important;
        float: none !important;
        vertical-align: middle !important;
        padding: 0 2% !important;
    }
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[logoglo]

I have implemented the code, but its shifted the entire 2 columns over to the left. I still want it “centered” so equal space on the left and right of the content band.

[ruenel]

Hello @logoglo,

I have checked your site and the image is positioned where you wanted it to be.

Could you please send us a screenshot of what you are seeing?

Thanks.

[logoglo]

Before:

After (now)

[nabeel]

Hi again,

Thank you for the screenshots. To fix this, just replace the previous code with this:

@media screen and (min-width: 768px) {
    .vertical-align {
        display: table !important;
        width: 100% !important;
    }

    .vertical-align .x-column {
        display: table-cell !important;
        float: none !important;
        vertical-align: middle !important;
        padding: 0 2% !important;
    }
}

Cheers!

[logoglo]

Fixed! thanks for your help.

[nabeel]

Glad we could help.

Cheers!