Archived topic
Vertically Center Overlay Text
5 replies · Started by Andy on May 26, 2018
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
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;
}
}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.
Your code should work.
Can also try with Flexbox. Google "Flexbox vertical align".
Flexbox worked great, unfortunately browser support for IE10 and below isn't great so decided to just alter the padding for mobile.
Thanks again.
You can try running to this website to ensure maximum browser support: https://autoprefixer.github.io/
Glad I could help!
