Bootstrap Карусель. Как уменьшить заголовок и индикаторы на мобильном телефоне

Question

размер заголовка и круглых индикаторов, карусели, когда я крепко закрою окно из хрома, то же самое в мобильном и в полноэкранном режиме. можно стать меньше, когда я на мобильный?

спасибо за внимание и извините за плохой английский!

Desktop:

Mobile:

Answer 1

Вы можете использовать медиа-запросы, чтобы задать другие значения для свойств CSS:

• Bootstrap's media queries
• media queries for standard devices

Например:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
@media (max-width: 767px) { 
 
    .carousel-caption h1 { /* Header */ 
 
    font-size: 20px; 
 
    } 
 
    .carousel-caption p { /* Paragraph */ 
 
    font-size: 12px; 
 
    } 
 
    .carousel-indicators li { /* Indicators */ 
 
    width: 8px; 
 
    height: 8px; 
 
    } 
 
    .carousel-indicators .active { /* Active indicator */ 
 
    width: 10px; 
 
    height: 10px; 
 
    } 
 
} 
 

 
@media (max-width: 480px) { 
 
    .carousel-caption h1 { /* Header */ 
 
    font-size: 16px; 
 
    } 
 
    .carousel-caption p { /* Paragraph */ 
 
    font-size: 10px; 
 
    } 
 
    .carousel-indicators li { /* Indicators */ 
 
    width: 6px; 
 
    height: 6px; 
 
    } 
 
    .carousel-indicators .active { /* Active indicator */ 
 
    width: 8px; 
 
    height: 8px; 
 
    } 
 
} 
 

 
.carousel img { 
 
    width: 100%; 
 
}

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="//placehold.it/900x300/c69/f9c/?text=First" alt=""> 
 
     <div class="carousel-caption"> 
 
     <h1>Header</h1> 
 
     <p>Paragraph.</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="//placehold.it/900x300/9c6/cf9/?text=Second" alt=""> 
 
     <div class="carousel-caption"> 
 
     <h1>Header</h1> 
 
     <p>Paragraph.</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="//placehold.it/900x300/69c/9cf/?text=Third" alt=""> 
 
     <div class="carousel-caption"> 
 
     <h1>Header</h1> 
 
     <p>Paragraph.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>