Menu overlaps on Slider in Phone Screens-CodePudding

Hi my

Below is the CSS code that covers the resolution on phone no idea where I'm going wrong on the slider CSS media code

    .slider-detail {
  padding-top: 122px; }
  @media screen and (max-width: 767px) {
    .slider-detail {
      padding-top: 115px; }

Display ratio: 2340x1080. I have attempted to change the code on the slider class to screen and

(max-width: 767px)
.slider-detail {
    padding-top: 130px;
}

But it still not working.

CodePudding user response：

Here you go...

Add the following CSS:

header {
    position: relative;
}

.carousel-item {
    height: 200px;
}

.carousel-item img {
    height: 100% !important;
}

.slider-detail {
    padding-top: 0;
}

@media screen and (max-width: 767px) {
   .slider-detail {
      padding-top: 0;
   }
}

CodePudding user response：

Add a margin-top to .slider-detail, equal to the height of the navigation bar in that media query.