Slider Text Height Adjustment

Have tried several CSS attempts to adjust the height of the text in my slider for mobile view but none seem to work. I’ve firstly adjusted the image so that it suits the screen better by adding this code:

@media only screen and (max-width: 767px){
.header-slider {
height: 500px !important;

Just need to bring the slider text up towards the top so that it displays similar to the desktop site as it is sitting too low. If you could please provide me with the code to do this, I’ll then adjust the parameters to suit.


Dear Lauren,

Thank you for getting in touch here.

Could you please try to apply the following CSS code?

@media only screen and (max-width: 767px){
    top: 50%;
    bottom: unset;
    -webkit-transform: unset;
    -moz-transform: unset;
    -ms-transform: unset;
    -o-transform: unset;
    transform: unset;

Let me know how it goes.



You’re a genius thanks, worked a treat. Just changed my height to 550px and the top to 60% and lines up beautifully.


Argh, why my spell check changed your name to Khahis instead of Kharis I’ll never know. Sorry! Thanks.

Hello Lauren,

Thank you for updating me. Great! I am glad to know that worked for you.

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