Slider on Mobile is not correct

Hi there

I have found a code to make my Slider shorter and I am very happy with the solution.

This is the code:
.slides-container .slide-item {
height: 600px !important;
}

.header-slider, .owl-wrapper {
height: 600px !important;
}

.slide-inner .maintitle {
margin-top: 29vh;
}

.overlay{
opacity: 0.3;
}

.site-info.container {
display: none;
}

But on the mobile it does not look OK at all. The text is not shown on the slider. It turns up in an empty part underneeth the slider. I am sure I just have to ad a code for the mobile version and it will all work. Can someone help me please?

And is there any option to have a transparent part behind the Text on the slider? But only behind the text not the fullwidth.

Many thanks

Hi,

You need to wrap your code with the CSS media query.
Please try to use this instead:

@media (min-width: 1200px){
    .slides-container .slide-item {
    height: 600px !important;
    }

    .header-slider, .owl-wrapper {
    height: 600px !important;
    }

    .slide-inner .maintitle {
    margin-top: 29vh;
    }

    .overlay{
    opacity: 0.3;
    }

    .site-info.container {
    display: none;
    }
}

Regards,

Perfect you are great! Many thanks.

Do you also have a solution for my second question:
And is there any option to have a transparent part/space behind the text on the slider? But only behind the text not the fullwidth.

Do you mean like a text-shadow? If yes, you can use this code:

.text-slider .maintitle {
    text-shadow: 2px 2px red;
}

Check this for more refferences https://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Thanks a lot!

It was not exactly what I was looking for but it is an option too.
As the picture in the slider has a lot of stuff on it, the text is not easy readable and therefore I thought it might be nice, when I insert a white transparent square behind the titel, subtitel and buttton so that text is better readable.
It is like an overlay on the picture but only at the place where the text is.

1 Like