Vertical align mobile header text


sorry if this is a duplicate question but I had a good look and everything so far seems similar but not quite what I am struggling with.

My site is - and I am trying to sort out the header text on the homepage (Chillac, France, 28.08.19) for mobile. It looks good on desktop centrally aligned both horizontally and vertically, however when viewing on mobile the vertical alignment is right at the top of the photo.

I tried some custom CSS but didn’t get it right as nothing happened. Please can you help?!


Hello Ben,

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      .header-image .header-info {
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);    


That’s great thanks very much Kharis!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.