0

Tengo un pequeño problema al momento de realizar el responsive , para mostrar la ubicación de un mapa en bootstrap, como adjunto en la imagen así me visualiza en un teléfono de resolución 320*480, en resoluciones posteriores no existe inconveniente alguno, el problema solo reside al visualizar en dispositivos celulares, y el cliente me pide que lo visualice de la manera correcta en todas las resoluciones posibles si alguien me podría ayudar para ver que estoy realizado de manera errónea.

introducir la descripción de la imagen aquí

<!doctype html>
<html lang="es">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <link rel="shortcut icon" href="../../img/web/ico_dientes_sanos.ico">

  <title>Clínica Dental Equilibrium</title>
</head>

<body>

  <!-- navbar -->

  <div class="navbar-dark bg-dark">
    <nav class="container navbar navbar-expand-md navbar-light text-center">
      <img src="../../img/web/ico_dientes_sanos.ico" width="30" height="30" alt="" loading="lazy">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#cita">Cita</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#servicios">Servicios</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#nosotros">Nosotros</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#testimonios">Sonrisas</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#localizanos">Localízanos</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>

 

  <!-- localizacion -->

  <div class="container">
    <div class="col-12 col-sm-12 col-md-12 col-lg-12">
      <!--Google map-->
      <!--Section: Contact v.1-->
      <section class="section pb-5" id="localizanos">
        <!--Section heading-->
        <h2 class="section-heading h1 pt-4">Contáctenos</h2>
        <!--Section description-->
        <p class="section-description pb-4">Si deseas más información te invitamos a enviarnos un correo a la siguiente dirección de correo electrónico <a href="mailto:[email protected]">[email protected].</a> donde resolveremos todas tus dudas y consultas.</p>
        <div class="row">
          <!--Grid column-->
          <div class="col-lg-6 mb-4">
            <!--Form with header-->
            <div class="card">
              <div class="card-body">
                <!--Header-->
                <div class="form-header blue accent-1">
                  <h3><i class="fas fa-envelope"></i> Write to us:</h3>
                </div>
                <p>We'll write rarely, but with only the best content.</p>
                <br>
                <!--Body-->
                <div class="md-form">
                  <i class="fas fa-user prefix grey-text"></i>
                  <input type="text" id="form-name" class="form-control">
                  <label for="form-name">Your name</label>
                </div>
                <div class="md-form">
                  <i class="fas fa-envelope prefix grey-text"></i>
                  <input type="text" id="form-email" class="form-control">
                  <label for="form-email">Your email</label>
                </div>
                <div class="md-form">
                  <i class="fas fa-tag prefix grey-text"></i>
                  <input type="text" id="form-Subject" class="form-control">
                  <label for="form-Subject">Subject</label>
                </div>
                <div class="md-form">
                  <i class="fas fa-pencil-alt prefix grey-text"></i>
                  <textarea id="form-text" class="form-control md-textarea" rows="3"></textarea>
                  <label for="form-text">Icon Prefix</label>
                </div>
                <div class="text-center mt-4">
                  <button class="btn btn-light-blue">Submit</button>
                </div>
              </div>
            </div>
            <!--Form with header-->
          </div>
          <!--Grid column-->
          <!--Grid column-->
          <div class="col-12 col-sm-12 col-md-6 col-lg-6">
            <!--Google map-->
            <div id="map-container-google-11" class="z-depth-1-half map-container-6">
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d825.2495342706723!2d-70.7160187708199!3d-34.171965298785835!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9663458bc62723c3%3A0xedf120ae507f044b!2sClinica%20Equilibrium%20Rancagua!5e0!3m2!1ses-419!2sec!4v1610317986865!5m2!1ses-419!2sec"
                width="500" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
                tabindex="0"></iframe>
            </div>
          </div>
          <!--Grid column-->
        </div>
      </section>
      <!--Section: Contact v.1-->
      <!--Google Maps-->
    </div>
  </div>

  <!-- footer -->

  <div class="">
    <footer class="bg-dark text-center py-3">
      <a href="">Copyright © 
        <script>
          var f = new Date();
          document.write(f.getFullYear());
        </script>
        Clínica Equilibrium
      </a>
    </footer>
  </div>


  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: Bootstrap Bundle with Popper -->
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


  <!-- Option 2: Separate Popper and Bootstrap JS -->
  <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
</body>

</html>

De antemano le agradezco su ayuda.

Saludos.

2
  • 1
    Simplemente agrega esta clase al iframe: col-sm-12 y quita el width:500 (Para que no depende de ello) Commented el 11 ene. 2021 a las 21:03
  • Gracias por tu ayuda, efectivamente ese pequeño detalle era lo único que tenia que cambiar.
    – Carrobe90
    Commented el 11 ene. 2021 a las 21:10

1 respuesta 1

0
 <div class="container">
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
  <!--Google map-->
  <!--Section: Contact v.1-->
  <section class="section pb-5" id="localizanos">
    <!--Section heading-->
    <h2 class="section-heading h1 pt-4">Contáctenos</h2>
    <!--Section description-->
    <p class="section-description pb-4">Si deseas más información te invitamos a enviarnos un correo a la siguiente dirección de correo electrónico <a href="mailto:[email protected]">[email protected].</a> donde resolveremos todas tus dudas y consultas.</p>
    <div class="row">
      <!--Grid column-->
      <div class="col-lg-6 mb-4">
        <!--Form with header-->
        <div class="card">
          <div class="card-body">
            <!--Header-->
            <div class="form-header blue accent-1">
              <h3><i class="fas fa-envelope"></i> Write to us:</h3>
            </div>
            <p>We'll write rarely, but with only the best content.</p>
            <br>
            <!--Body-->
            <div class="md-form">
              <i class="fas fa-user prefix grey-text"></i>
              <input type="text" id="form-name" class="form-control">
              <label for="form-name">Your name</label>
            </div>
            <div class="md-form">
              <i class="fas fa-envelope prefix grey-text"></i>
              <input type="text" id="form-email" class="form-control">
              <label for="form-email">Your email</label>
            </div>
            <div class="md-form">
              <i class="fas fa-tag prefix grey-text"></i>
              <input type="text" id="form-Subject" class="form-control">
              <label for="form-Subject">Subject</label>
            </div>
            <div class="md-form">
              <i class="fas fa-pencil-alt prefix grey-text"></i>
              <textarea id="form-text" class="form-control md-textarea" rows="3"></textarea>
              <label for="form-text">Icon Prefix</label>
            </div>
            <div class="text-center mt-4">
              <button class="btn btn-light-blue">Submit</button>
            </div>
          </div>
        </div>
        <!--Form with header-->
      </div>
      <!--Grid column-->
      <!--Grid column-->
      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
        <!--Google map-->
        <div id="map-container-google-11" class="z-depth-1-half map-container-6">
          <iframe class="col-12 col-sm-12"
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d825.2495342706723!2d-70.7160187708199!3d-34.171965298785835!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9663458bc62723c3%3A0xedf120ae507f044b!2sClinica%20Equilibrium%20Rancagua!5e0!3m2!1ses-419!2sec!4v1610317986865!5m2!1ses-419!2sec"
            height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
            tabindex="0"></iframe>
        </div>
      </div>
      <!--Grid column-->
    </div>
  </section>
  <!--Section: Contact v.1-->
  <!--Google Maps-->
</div>

Gracias al aporte de Juan Rivera, efectivamente se pudo solucionar ese pequeño detalle que me presentaba problemas en la vista responsive en dispositivos móviles.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.