Carousel Bootstrap

0

The css that contributed qwerty is applied and remains that way.

@media (max-width: 767px) {
  .display-4 {
    font-size: 1.3em !important;
  }
  h4 {
  font-size: 1em !important;
}
<!doctype html>
<html lang="es">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
        
        <!-- Archivos Personales -->
        <link rel="stylesheet" href="files/css/main.css">

        <title>Madiweb</title>
    </head>
    <body>
        <!-- Menu Principal -->
        <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarText">
                <ul class="navbar-nav ml-5 mr-auto">
                    <li class="nav-item active mr-3">
                        <a class="nav-link" href="#">Inicio <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item mr-3">
                        <a class="nav-link" href="#">Empresa</a>
                    </li>
                    <li class="nav-item mr-3">
                        <a class="nav-link" href="#">Servicios</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contacto</a>
                    </li>
                </ul>
                <!-- Barra Contacto -->
                <span class="navbar-text mr-5 text-body">
                    (+54) 03725 - 15440397 | [email protected]
                </span>
            </div>
        </nav>
        
        <!-- Portada -->
        <div id="carouselExampleIndicators" class="carousel slide" style="margin-top: 3.5rem;" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="https://td2branding.com/wp-content/uploads/2018/08/Fondo-Amco-1920-x-800-1.jpg" class="d-block w-100" alt="portada-1">
                    <div class="carousel-caption d-block">
                        <div class="display-4">DISEÑO WEB A MEDIDA</div>
                        <hr class="my-2 bg-white">
                        <h4>Somos diseñadores de web, analizamos cada proyecto y presentamos la mejor opción para cada necesidad, brindando sitios funcionales de calidad.</h4>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    </body>
</html>
    
asked by Alejandro Parcellier 05.01.2019 в 18:25
source

1 answer

0

Just put an @media, modify the font size of the element and it is important that you put it! important for it to apply.

@media (max-width: 767px) {
  .display-4 {
    font-size: 1.3em !important;
  }
  h4 {
  font-size: 1em !important;
}
<!doctype html>
<html lang="es">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

        <title>Madiweb</title>
    </head>
    <body>
        <!-- Menu Principal -->
        <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarText">
                <ul class="navbar-nav ml-5 mr-auto">
                    <li class="nav-item active mr-3">
                        <a class="nav-link" href="#">Inicio <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item mr-3">
                        <a class="nav-link" href="#">Empresa</a>
                    </li>
                    <li class="nav-item mr-3">
                        <a class="nav-link" href="#">Servicios</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contacto</a>
                    </li>
                </ul>
                <!-- Barra Contacto -->
                <span class="navbar-text mr-5 text-body">
                    (+54) 03725 - 15440397 | [email protected]
                </span>
            </div>
        </nav>
        
        <!-- Portada -->
        <div id="carouselExampleIndicators" class="carousel slide" style="margin-top: 3.5rem;" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="https://td2branding.com/wp-content/uploads/2018/08/Fondo-Amco-1920-x-800-1.jpg" class="d-block w-100" alt="portada-1">
                    <div class="carousel-caption d-block">
                        <div class="display-4">DISEÑO WEB A MEDIDA</div>
                        <hr class="my-2 bg-white">
                        <h4>Somos diseñadores de web, analizamos cada proyecto y presentamos la mejor opción para cada necesidad, brindando sitios funcionales de calidad.</h4>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    </body>
</html>
    
answered by 05.01.2019 в 18:42