html - Increase height of bootstrap content -


i have div content video, , working fine, problem is, everytime try see how adapts on diferent devices height of video decrease, think normal behaviour of bootstrap, thing need div increase when devices smaller, how can that?

here html video , text inside

 <section class="content_section white_section bg2">         <div class="embed-responsive embed-responsive-16by9">               <div id="video_overlays"></div>              <div class="container vertical-center ">                 <div id="over">                     <div class="title-wrapper main_title  centered upper">                         <h2><span class="line"></span>simple solutions complex problems</h2>                     </div>                      <div class="description4 centered">                         <p dir="ltr"><b id="docs-internal-guid-7b963bcb-e991-08ff-b846-612f8d57baee">the world complex place.&nbsp;</b><br><b>our solutions designed allow organisations , use information without adding layers , layers of heavy software.<br> usability , simple deployment key words.</b></p>                      </div>                 </div>             </div>             <div id="player" width="100%" height="100%" style="z-index:-1">             </div>         </div>      </section> 

you can using media queries. assuming div holding video player has id #player. note px , vh values used below example. may set them want. in below examples smaller devices have video player increased height.

@media screen , (min-width: 1200px ) { #player {     height:500px; //or height:50vh }  } 

the above code means screen sizes having width above 1200px height 500px ( can set whatever want)

@media screen , (max-width: 1199px) , (min-width: 600px) { #player {     height:700px; //or height:70vh  } } 

the above code means screen sizes having width between 600px , 1199px height 700px. , code below means screen resolutions below 600px height of video player 800px.

@media screen , (max-width: 599px) { #player {     height:800px; //or height:80vh } } 

read more media queries here : https://www.w3schools.com/css/css3_mediaqueries_ex.asp


Comments

Popular posts from this blog

inversion of control - Autofac named registration constructor injection -

verilog - Systemverilog dynamic casting issues -

ios - Change Storyboard View using Seague -