Increase space between title and subtitle on header slider

Hi,

Is there a way to adjust the spacing between the header title and the subtitle on the header slider?

I have tried a few different solutions that I have found on here and none seem to work for me.

Ideally, I would like the title to be near the top and the subtitles to be where they are now, near the bottom of the image.

Website address: www.improvit.com

Many thanks in advance.

Sarah

Hi Sarah,

Please try this CSS code to adjust the header content:

.slide-inner {
    height: 82%;
    top: 0;
    margin-top: 30%;
}

.slide-inner .subtitle {
    top: 50%;
    position: relative;
}

.slide-inner .text-slider {
    height: 100%;
}

@media (min-width: 1200px){
    .slide-inner {
        margin-top: 23%
    }
}

Put the code into Customize > additional CSS.

Regards,

Thanks Awan,that looks great on my laptop screen. However, when I view it on a larger screen the subtitles were too low down and off the picture, so I had to move it up slightly.
And when viewing on my phone the wording is much higher up.

The picture also shows differently on different devices. It should be full screen.

Any ideas on how to fix this?

Many thanks in advance.

I seeā€¦ then please change the code above with this:

.slide-inner {
    height: 82%;
    top: 0;
    margin-top: 30%;
}

.slide-inner .subtitle {
    top: 80%;
    position: relative;
}

.slide-inner .text-slider {
    height: 100%;
}

@media (min-width: 768px){
    .slide-inner .subtitle {
        top: 50%;
    }
}

@media (min-width: 1024px){
    .slide-inner .subtitle {
        top: 40%;
    }
}
@media (min-width: 1200px){
    .slide-inner {
        margin-top: 23%
    }
    .slide-inner .subtitle {
        top: 50%;
    }
}
@media (min-width: 2000px){
    .slide-inner {
        margin-top: 15%
    }
    .slide-inner .subtitle {
        top: 30%;
    }
}