Slider Text moved up out of nowhere

Hi everybody :slight_smile:

I did not change anything but all of a sudden the text of the slider is on the top instead of the middle for desktops and laptops and still in the middle for tablets and smartphones.

Here is my website: https://big-ethics.com

I tried to add:

.slide-inner {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
}

However, it seems to think that this is 50% for desktops and if I move it lower so that it looks like 50% on desktops it is too low on all other devices.

What can I do and why did this happen all of a sudden?

Hi,

You could use Media Queries to set your website looking in responsive mode. Let’s have a look to https://www.w3schools.com/css/css3_mediaqueries_ex.asp for further details about it.

A quick exemple could be:

Desktop + laptop:

@media screen and (max-width: 2500px) {
.slide-inner {
position: absolute;
top: 70%;
left: 0;
right: 0;
text-align: center;
}
}

Tablets:

@media screen and (max-width: 600px) {
.slide-inner {
position: absolute;
top: 60%;
left: 0;
right: 0;
text-align: center;
}
}

Mobile:

@media screen and (max-width: 300px) {
.slide-inner {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
}
}

I would recommend you to use the ‘Simple CSS’ WP plugin (or an other) to insert your customized CSS :wink:

Hope that helps

Bossanovation