2

Estoy editando los estilos de está pagina web: http://www.ishameetings.cl/

El problema es que al disminuir el ancho del navegador el div llamado "site-top-bar-right" no muestra su contenido, como se muestra en la siguiente captura:

Div con un ancho pequeño

Div con un ancho grande

Cualquier sugerencia o ayuda es bienvenida.

Codigo Html

 <header id="masthead" class="site-header site-header-one bg-left header-nosocial header-boxed-in">
        <div class="site-top-bar site-pad">
            <div class="site-container">

                <div class="site-top-bar-left">
                  <!--

                  <i class="fa fa-map-marker"></i>
                  -->
                    <a href="http://www.isha.net">Visit ISHA.net</a>
                </div>



                <div class="site-top-bar-right">



                    <i class="fa fa-envelope-o"></i>
                      <a href="mailto:%63%6fn&#116;&#097;c&#116;&#064;%69s%68%61%6d&#101;%65&#116;&#105;n%67%73%2e&#099;&#108;">[email protected]</a>

                  <!--

                          <i class="fa fa-phone"></i>
                      +569 0000 0000                                        -->

                    &nbsp;
                    &nbsp;

                    JOIN US IN SANTIAGO



                </div>
                <div class="clearboth"></div>
            </div>
        </div>
        <div class="header-bar site-pad">
            <div class="site-container">
                <div class="header-bar-inner">
                    <div class="site-branding">


                      <div class="logo_isha">
                        <a href="http://ishameetings.cl/"><img src="http://ishameetings.cl/wp-content/uploads/2017/01/logo.png"/></a>

CSS

  .site-header-one .site-top-bar-left {
      background-color: #D7565D !important;
  color: #ffffff;
  }

  .site-header-one .site-top-bar-right {
      background-color: #D7565D !important;
      color: #ffffff;
      float: right;

  }

  .site-header-one .site-top-bar {
      background-color: #D7565D !important;
  }

  .site-header .header-bar .site-container {
      margin-top: 0px !important;
  }
5
  • 1
    Hola america. Si vas a mostrar Código, que sea en formato texto en vez de imagen. Es mucho mas claro, se puede copiar y tarda menos en cargar (para aquellos con poca cobertura movil)
    – lois6b
    Commented el 22 feb. 2017 a las 15:34
  • Desde el inspector del navegador web, en el caso del ancho reducido que oculta el div, si desplegas con la flechecita el div, hay contenido? Porque por lo que parece es que se oculta el contenido. ya que el div continua marcandose en azul en la pantalla.
    – Monclus
    Commented el 22 feb. 2017 a las 16:13
  • Si hablas del slider, el diseño responsivo es lo que hace que sea adaptable y no se desborde, si aun asi quieres mostrar las imagenes en ventana pequeña prueba buscar las medias queries de css estan definidas por @media{} y busca la clase de el slider, o bien comenta la class="wds_slideshow_image_0"
    – matteo
    Commented el 22 feb. 2017 a las 16:16
  • Y estás seguro de que ese es todo el CSS que estás cargando? No hay boostrap en el html generado?
    – ffflabs
    Commented el 22 feb. 2017 a las 17:40
  • Gracias, por agregar el código, además he descartado el uso de las media queries.
    – user25645
    Commented el 23 feb. 2017 a las 13:05

1 respuesta 1

1

Esto está sucediendo porque estás implementando de este estilo:

.site-header-one .site-top-bar {
    height: 30px !important;
}

Cuando se supone que es así, sin lo height: 30px !important;:

.site-header-one .site-top-bar {
    padding-bottom: 2px;
}

Y por qué he cambiado la propiedad height: 30px !important; para padding-bottom: 2px;, porque me doy cuenta que tienes otra propriedad box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06) inset; en la clase - .site-header-one .site-top-bar, para dar una sombra à la barra que despues no se ha notar se no tener esta padding.

1
  • 1
    Gracias Cʜᴜɴ, ¡diste justo en el clavo! Borré la altura de 30px y se solucionó el problema.
    – user25645
    Commented el 23 feb. 2017 a las 13:07

Tu Respuesta

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