1

Hola he estado haciendo una pequeña aplicación, todo bien pero me he dado cuenta que al momento de redimensionarla aparece un extraño espacio en blanco al llegar a ciertos pixeles(340 mas o menos) he probado varias cosas que encontré en otra publicación que vi similar(No puedo quitar el espacio en blanco de mi página web por ningún método) pero nada me ha funcionado de momento, esto es lo que sucede en cuestión: introducir la descripción de la imagen aquí

Aquí mi código css:

 body {
  margin: 0;
}

.Formulario {

  width: 100%;
  height: 650px;
  padding-top: 50px;
  padding-bottom: 20px;
  background-color: #fbfbfb;
  position: relative;
  overflow-y: auto;
  box-sizing: border-box;
}

.cuadro_tramites {
  width: 100%;
  height: 515px;
  background-color: #6346BA;
  color: #fbfbfb;
  position: absolute;
  left: 0;
  top: 0;
  overflow-x: auto;
  display: flex;
}

.cuadro-scroll {
  max-height: auto;
  width: 1200px;
  display: flex;
  overflow-x: auto;
}

.cuadro-permiso-circulacion {
  height: 290px;
  background-color: aliceblue;
  box-sizing: border-box;
  width: 280px;
  padding: 5px;
  margin: 0px auto;
  border-radius: 10px;
  text-align: center;
  margin-right: 10px;
  margin-left: 10px;
}

.boton_rojo {
  width: 240px;
  height: 15px;
  background-color: #DB3069;
  color: aliceblue;
  margin-top: 15px;
  border-radius: 5px;
  display: inline-block;
  padding: 10px 0px;
  text-decoration: none;
}

.label1 {
  color: black;
}

.btnEventos {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #6346BA;
  position: absolute;
  top: 10px;
  left: -55px;
}

.btnSolicitarInfo {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #6346BA;
  position: absolute;
  top: 10px;
  left: 35px;
}

.btnAudiencia {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #6346BA;
  position: absolute;
  top: 10px;
  left: 130px;
}

.btnConocelosP {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #6346BA;
  position: absolute;
  top: 10px;
  left: 230px;
}

.botones_circulos {
  width: 100%;
  height: 100px;
  text-align: center;
  position: absolute;
  top: 500px;
}

.contenedor_parrafos {
  width: 100%;
  height: 80px;
  text-align: center;
  position: absolute;
  top: 575px;
}

.cuadro_directo {
  position: absolute;
  top: 800px;
  width: 100%;
}

.p_envivo {
  float: right;
}

.cuadrado1 {
  background: #034D8E;
  border-radius: 4px;
  width: 95%;
  height: 15px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  z-index: 2;
  color: #fbfbfb;
  margin-bottom: 10px;
  text-decoration: none;
  display: inline-block;
  padding: 10px 0px;
}

.cuadrado2 {
  background: #2885AD;
  border-radius: 4px;
  color: aliceblue;
  width: 95%;
  height: 15px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  z-index: 2;
  text-decoration: none;
  display: inline-block;
  padding: 10px 0px;
  margin-bottom: 8px;
}

.label2 {
  color: #fbfbfb;
}

.bienvenidx {
  margin-left: 20px;
  margin-bottom: 20px;
}

.tramitx {
  margin-left: 20px;
}

.botones_fixed {
  position: fixed;
  width: 100%;
  min-height: 100px;
  background-color: #fbfbfb;
  top: 70%;
  left: 5%;
}

.cuadro_logo {
  background-color: #6346BA;
  width: 100%;
  height: auto;
  text-align: center;
  position: fixed;
  z-index: 2;
}

.logo_muni {
  margin-top: 10px;
  margin-bottom: 10px;
}

.boton {
  border-radius: 50%;
  background-color: #6346BA;
  width: 55px;
  height: 55px;
  display: inline-block;
  margin-top: 20px;
}

.i_Eventos {
  width: 55px;
  height: 55px;
}

.i_solicitar_info {
  width: 55px;
  height: 55px;
}

.i_solicitar_audiencia {
  width: 55px;
  height: 55px;
}

.i_conoce_losP {
  width: 55px;
  height: 55px;
}

* {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.contenedor_tramites {
  width: auto;
  height: auto;
  margin-top: 100px;
}

.botones_espacio {
  width: 350px;
  height: 140px;
  background-color: #fbfbfb;
}

.contenedor {
  width: 100%;
  height: 100%;
  background-color: #fbfbfb;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fbfbfb;
  color: white;
  text-align: center;
}

.i_cuadro_tramites {
  margin-top: 10px;
}

.G_en_vivo {
  position: absolute;
}

.alineador_b {
  display: inline-block;
  margin: 15px;
}

.alineador_p {
  display: inline-block;
  width: 85px;
  margin: 1px;
}

y aqui mi codigo Html

<div class="contenedor">
<div class="Formulario" id="Formulario">
  <div class="cuadro_tramites">
    <div class="cuadro_logo" id="cuadro_logo">
      <img class="logo_muni" src="imagenes/logomuni.png" width="100" height="80">
    </div>
    <div class="contenedor_tramites">
      <h3 class="bienvenidx">Bienvenid@</h3>
      <h4 class="tramitx">Selecciona el trámite que deseas:</h4>
      <div class="cuadro-scroll">
        <div class="cuadro-permiso-circulacion">
          <label class="label1" for="Permiso-circulacion">Permiso de circulacion</label>
          <hr>
          <img class="i_cuadro_tramites" src="imagenes/coche.png" width="170px" height="170px">
          <a class="boton_rojo" href="https://home.municipalidadgorbea.cl/archivos/3118">Pagar aqui</a>
        </div>
        <div class="cuadro-permiso-circulacion">
          <label class="label1" for="Permiso-circulacion">Pago derechos de aseo</label>
          <hr>
          <img class="i_cuadro_tramites" src="imagenes/pago aseo.png" width="170px" height="170px">
          <a class="boton_rojo"
            href="https://www.sem.gob.cl/pago/buscar.php?pago_id=4&inst_id=69191200&setiframe=0">Pagar aqui</a>
        </div>
        <div class="cuadro-permiso-circulacion">
          <label class="label1" for="Permiso-circulacion">Tramites departamentos de obras</label>
          <hr>
          <img class="i_cuadro_tramites" src="imagenes/en-construccion.png" width="170px" height="170px">
          <a class="boton_rojo" href="https://mattgr05.github.io/Proyecto-app-muni/index4.html">Revisar aqui</a>
        </div>
        <div class="cuadro-permiso-circulacion">
          <label class="label1" for="Permiso-circulacion">Registro social de hogares</label>
          <hr>
          <img class="i_cuadro_tramites" src="imagenes/registro social.png" width="170px" height="170px">
          <a class="boton_rojo" href="https://rsh.ministeriodesarrollosocial.gob.cl/portada">Revisar aqui</a>
        </div>
      </div>
    </div>
  </div>
  <div class="botones_circulos">
    <div class="alineador_b">
      <a class="boton" href="https://mattgr05.github.io/Proyecto-app-muni/index5.html"><img class="i_Eventos"
          src="imagenes/ico eventos.png"></a>
    </div>
    <div class="alineador_b">
      <a class="boton"
        href="https://www.portaltransparencia.cl/PortalPdT/web/guest/directorio-de-organismos-regulados?p_p_id=pdtorganismos_WAR_pdtorganismosportlet&orgcode=e1c4b38162d39"><img
          class="i_solicitar_info" src="imagenes/ico solicitar info.png"></a>
    </div>
    <div class="alineador_b">
      <a class="boton" href="https://www.leylobby.gob.cl/instituciones/MU099"><img class="i_solicitar_audiencia"
          src="imagenes/ico solicitar audiencia.png"></a>
    </div>
    <div class="alineador_b">
      <a class="boton" href="https://mattgr05.github.io/Proyecto-app-muni/index3.html"><img class="i_conoce_losP"
          src="imagenes/ico conoce los programas.png"></a>
    </div>
  </div>
  <div class="contenedor_parrafos">
    <div class="alineador_p">
      <p>
      <h5>Eventos<h5>
          </p>
    </div>
    <div class="alineador_p">
      <p>
      <h5>Solicitar informacion<h5>
          </p>
    </div>
    <div class="alineador_p">
      <p>
      <h5>Solicitar audiencia<h5>
          </p>
    </div>
    <div class="alineador_p">
      <p>
      <h5>Conoce los programas<h5>
          </p>
    </div>
  </div>
</div>
<div class="cuadro_directo">
  <h3 class="G_en_vivo">Gorbea en vivo:</h3>
  <h4>
    <p class="p_envivo">En vivo ahora 🔴</p>
  </h4>
  <iframe width="100%" height="250" src="https://www.youtube.com/embed/ceqgwo7U28Y" title="YouTube video player"
    frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
  <div class="botones_espacio">
  </div>
  <div class="footer">
    <hr width="90%">
    <a class="cuadrado1" href="tel:452972000">Llámanos</a>
    <a class="cuadrado2" href="https://mattgr05.github.io/Proyecto-app-muni/index2.html">Envíanos un mensaje</a>
  </div>
</div>

1 respuesta 1

1

Elimina los overflow, pon overflow: hide;

EJEMPLO: https://jsfiddle.net/enlinea777/12xzkdt0/1/

introducir la descripción de la imagen aquí

1
  • hola, gracias por el cometario, pero el recuadro morado contiene 3 cuadros blancos mas hacia la derecha es por eso que tengo un overflow x en un div que contiene todo el recuadro morado y en general se me desordenado todo el código jaja, pero gracias de igual manera. Commented el 19 abr. 2022 a las 14:58

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.