I have a problem with bootstrap mediaquery-CodePudding

<div >
        <div >
            <img src="img/pexels-binyamin-mellish-186077.jpg"  alt="Slide 1">
            <div >
                <h5>Second slide label</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <p><a href="#" >Learn More</a></p>
              </div>
        </div>

I created a simple carousel with Bootstrap.

 @media only screen and (min-width: 768px) and (max-width: 991px){
    .carousel-caption{
        bottom: 130px !important;
    }
    .carousel-caption p{
        width: 100%;
        font-size: 50px;
    }
} 
@media only screen and (max-width: 767px){
    .navbar-nav{
        text-align: center;

    }
    .carousel-caption{
        bottom: 125px !important;
    }
    .carousel-caption h5{
        font-size: 17px;
    }
    .carousel-caption a{
        padding: 10px 15px;
        width: 100%;
    }
    .carousel-caption p{
        width: 100%;
        line-height: 1.6px;
        font-size: 12px;
    }
}



 .carousel-item{
    height: 100vh;
    min-height: 300px;
}
.carousel-caption{
    bottom: 220px;
    z-index: 2;
}
.carousel-caption h5{
    font-size: 45px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 25px;
}
.carousel-caption p{
    width: 60%;
    margin: auto;
    font-size: 18px;
    line-height: 1.9;
}

I then assigned the css properties.

Carousel view in full screen

I reduced the height of the page.

    .carousel-caption{
    bottom: 220px;
    z-index: 2;
}

When I decrease the height in this code and shrink the page, text comes to the center of the carousel. But this time, the text is shifting up on the big screen. How can I get these texts in the middle of the screen on every screen?

CodePudding user response：

If you put the regular CSS rules (without media conditions) at the bottom of your stylesheet, they will overwrite your media queries, since they follow after them and are valid for every size.

So just change the order to avoid this: Move the regular rules to the top and let the media queries follow below them. Then the regular rules will be overwritten by the media queries (for the defined sizes) as desired.

CodePudding user response：

Instead of setting bottom to some fixed px, make that div height same as parent height by setting top and bottom like following:

  .carousel-caption{
     top:0;
     display: flex;
     justify-content:center;
     align-items: center;
     bottom: 0;
     z-index: 2;
  }

and we used flexbox here to center the elements.