How to shift down the slider for small screens

Do you know what browser that emulator used?

Hi and thanks!

I am not sure, but I’ve played with changing the resolution on both Chrome and Firefox and the result is the same as the emulator.

Thanks again!

I see. Looks like that’s coming from this style:

@media (max-width: 1280px) and (min-width: 800px) {
 .carousel-inner {
  position: relative;
  top: -50px;
 }
}

The “top: -50px”. So to override that try:

@media (max-width: 1280px) and (min-width: 800px) {
 .carousel-inner {
  top: 0;
 }
}

Hi again,

I just inserted the code you provided me in my CSS Child file but it seems that noting changed. The slider still overlaps with the menu bar.

I also tried changing the value of “top=-50” to different numbers but it seems that the site doesn’t accept any changes of this kind.

Do you have any other ideas what could be the problem here?

Thank you!

Try:

@media (max-width: 1280px) and (min-width: 800px) {
 body .carousel-inner {
  top: 0;
 }
}

Great, it works but now I need to move somehow the text below the slider and the three featured items a bit down because now they overlap with the slider.

Thanks!

Try adding:

body .carousel {
 max-height: none;
}

To your media query.

You have this:

@media (max-width: 1280px) and (min-width: 800px)
.carousel {
margin-bottom: 0;
padding-bottom: 0;
max-height: 280px;
}

remove that max-height: 280px;

Lol great ?? it works ??

Thank you very much for your help and time and for your quick replies.

Thanks!!!
Startwebsiting

Thank you for your reply, d4z_c0nf.

I resolved the issue just by adding:

body .carousel {
max-height: none;
}

Thanks!