0

tengo un diseño realizado en bootstrap, pero una columna (la que contiene la imagen #icon_change) se oculta por detrás de las otras columnas al visualizarse en celular o al reducir la ventana en la pc. Revisé pero no logro acertar con el comportamiento de la misma.

https://crisav.com.pe/dmtc-form1.php

Gracias por sus comentarios.

<div class="row">
  <div
    class="landing_option card col-5 col-5-sm dis-inline-block text-center "
    id="change_panel_2">
    <div
      class="col-4 col-5-sm dis-inline-block on-resp"
      style="vertical-align: top; text-align: center; margin-top: -1px;">
      <span class="fs-18 font-heavy" style="line-height: 1;">USD</span>
      <br class="hidden-sm">
      <span class="fs-20">$</span>
    </div>
    <div
      class="landing_option_right col-8 col-7-sm dis-inline-block p-t-8">
      <div class="inp inp_label filled">
        <label id="label_amount">Tú Compras</label>
        <input
          class="inp_hint" id="inp_amount"
          placeholder="" value="1500" maxlength="12"
          oninput="decimalOnly(this); numberWithCommas(this); updateChangeFromPrice();">
      </div>
    </div>
  </div>

  <div
    class="col-2 col-2-sm landing_option dis-inline-block text-center"
    style="height:100%">
    <div
      class=" dis-inline-block text-center" style="vertical-align: bottom;">
      <img
        class="m-t-8 rotated" id="icon_change"
        src="./images/icono-cambiar.png"
        style="cursor: pointer;"
        onclick="updateSelectedAction()"
        alt="casa de cambio online">
    </div>
  </div>

  <div
    class="col-5 col-5-sm landing_option card  dis-inline-block text-center "
    id="change_panel_1">
    <div
      class="col-4 col-5-sm dis-inline-block on-resp"
      style="vertical-align: top; text-align: center; margin-top: -1px;">
      <span class="fs-18 font-heavy m-l-6" style="line-height: 1;">PEN</span>
      <br class="hidden-sm">
      <span class="fs-20 m-l-6">S/</span>
    </div>
    <div
      class="landing_option_right col-8 col-7-sm dis-inline-block p-t-8">
      <div class="inp inp_label filled ">
        <label id="label_amount_2">Tú Transfieres</label>
        <input
          class="inp_hint" id="inp_amount_2"
          placeholder="" value="1,000" maxlength="12"
          oninput="decimalOnly(this); numberWithCommas(this); updateChangeFromOutput();">
      </div>
    </div>
  </div>
</div>
2
  • versión de bootstrap? Commented el 1 jun. a las 4:29
  • Saludos. Te sugiero incluir imagen/imágenes del escenario que indicas; no el sitio web donde lo tienes... ahora bien; la div que contiene el icon_change de tu interés, tiene aplicado style (aunque no le pones !important) puede afecte tu diseño responsivo. los col- que pones con los col-sm- es el mismo efecto que con solo col-; también esta el detalle que el div donde tienes el img no tiene la clase card de los otros. Commented el 1 jun. a las 4:38

1 respuesta 1

0

Hermano mío, buenas tardes, espero estés excelente.

La regla CSS que te está afectando se encuentra en la Hoja de estilo landing.css, en la línea Nro: 168 donde se define lo siguiente:

@media only screen and (max-width: 600px) {
    #change_panel_1 {
        margin-top: -40px;
    }
}

Como veras, esa media query se activa a los 600 pixeles o menos, y hace que Justamente ese #change_panel_1 se vea afectado, sugiero removerla ..

y es tan especifico que o bien fue un error que se olvidaron de corregir, o bien lo hicieron a propósito para sabotear.. OJO CON ESO.

Saludos

EDIT:

Seguí probando tu responsividad y tienes otra regla más, aún más oculta, en el mismo landing.css, línea:111 que declara lo siguiente:

@media only screen and (max-width: 425px) {
    #logo_calc, #icon_cambio {
        visibility: hidden;
        height: 0px;
    }
}

La declaración visibility:hidden y height:0 hacen que se vuelva a ocultar el botón, pero esta vez a los 425px, desactivalas .

6
  • Muchas gracias!! tema solucionado! Commented el 4 jun. a las 4:26
  • y mi "respuesta aceptada" buen señor :( Commented el 4 jun. a las 4:32
  • también @NoSoyAaronCarter ! muchas gracias por su ayuda. :) Respuesta aceptada!!! Commented el 4 jun. a las 4:45
  • Claro, pero tienes que marcar mi respuesta como aceptada hermano, sino no me dan puntos de reputación :( Commented el 4 jun. a las 4:47
  • Mil disculpas!! En realidad no sabía, soy nuevo en la plataforma, pero creo que ya lo pude hacer. :) Commented el 4 jun. a las 5:27

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.