Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Vertically Center Overlay Text

Home Forums Support [Resolved] Vertically Center Overlay Text

Home Forums Support Vertically Center Overlay Text

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #585051
    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

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #585187
    Leo
    Staff
    Customer Support

    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;
        }
    }
    #585278
    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.

    #585299
    Leo
    Staff
    Customer Support

    Your code should work.

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

    #585543
    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.

    #585736
    Leo
    Staff
    Customer Support

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

    Glad I could help!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.