[Resolved] Vertically Center Overlay Text

[Andy]

Hi,
I’m using the unsemantic grid to create 2 columns with background images and text/button overlaid on top.
I want the overlaid text/button to be vertically centered just like they are on GP Page Headers.

The 2 columns are located on the home page below the introduction text.
They look ok on desktop, but on mobile view they are definitely not central. Any help much appreciated.

Front-end password: gpaccess18

[Leo]

Hi there,

You could try setting different padding for mobile using media query:

@media (max-width: 768px) {
    .overlay-content {
        text-align: center;
        color: white;
        padding: 30% 0;
    }
}

[Andy]

Hi Leo,

Thanks for the suggestion, I had to adjust the bottom padding to make this work for mobile as below:

@media (max-width: 400px) {
    .overlay-content {
        text-align: center;
        color: white;
        padding: 20% 0 5% 0;
    }
}

Just wondered if there was a better solution using the page header code.

[Leo]

Your code should work.

Can also try with Flexbox. Google “Flexbox vertical align”.

[Andy]

Flexbox worked great, unfortunately browser support for IE10 and below isn’t great so decided to just alter the padding for mobile.

Thanks again.

[Leo]

You can try running to this website to ensure maximum browser support: https://autoprefixer.github.io/

Glad I could help!

[Author]

Posts