1

Hola tengo una sección en la cabecera de la pagina, por encima de la barra de navegación, donde muestro el nombre de la empresa a la izquierda, y el correo y teléfono a la derecha. Cuando aumento el tamaño del texto del correo electrodo, esto hace que el numero de teléfono se pase a la linea de abajo. He modificado el css, reduciendo el padding-letf, pero lo único que consigo es que el texto se una mas al icono. No encuentro la manera de desplazar el icono del correo hacia la izquierda.

EDITO: A petición de un compañero, mostrando imágenes en las que en la parte derecha de arriba, es lo que me da los problemas

Muestro capturas: Añado una imagen de como queda ahora el texto: introducir la descripción de la imagen aquí

Y ahora otra captura de como debería quedar aun con el texto tan largo como en la primera imagen. Así debería quedar:

introducir la descripción de la imagen aquí Muestro parte del código que espero sea suficiente para que puedan darme alguna idea. Gracias.

.hdr_top_bar {
    background: #33381e;
    padding: 8px 0px 9px;
}
.hdr_top_bar.hdr_top_bar_var2 {
    background: rgba(0, 0, 0, .4);
    padding: 11px 0px 12px;
}
.hdr_top_bar.hdr_top_bar_var3 {
    background: none;
    border-bottom: 1px solid #776250;
    padding: 7px 0px;
    margin-bottom: 7px;
}
.landing_gardening_txt {
    font-size: 18px;
    color: #7f9a48;
    font-style: italic;
    float: left;
    margin: 3px 0px;
}
.landing_gardening_txt.land_garden_txtvar2 {
    color: #fff;
}
.hdr_cnt {
    float: right;
}
.hdr_cnt ul {
    margin: 1px 0px 0px;
    padding: 0px;
    float: right;
}
.hdr_cnt ul li {
    float: left;
    font-size: 18px;
    font-weight: 400;
    font-style: italic;
    color: #abb488;
    margin-right: 28px;
    line-height: 29px;
}
.hdr_cnt ul li.cnt_white_color {
    color: #a2a4a5;
}
.hdr_cnt ul li:last-child {
    margin-right: 0px;
}
.hdr_cnt ul li a {
    color: #abb488;
    text-decoration: none;
}
.hdr_cnt ul li a.cnt_white_color {
    color: #fff;
}
.hdr_cnt ul li.var3_white {
    color: #fff;
}
.hdr_cnt ul li a.var3_white {
    color: #fff;
}
.hdr_msg_icon {
    background: url(../images/common_in_all/msg_icon.png) no-repeat 0px 6px;
    padding-left: 42px;
    font-size: 16px;
}
.hdr_call_icon {
    background: url(../images/common_in_all/call_icon.png) no-repeat 0px 6px;
    padding-left: 34px;
    font-size: 18px;
}
.hdr_msg_icon.white_msg_icon {
    background: url(../images/common_in_all/white_msg_icon.png) no-repeat 0px 6px;
}
.hdr_call_icon.white_call_icon {
    background: url(../images/common_in_all/white_call_icon.png) no-repeat 0px 6px;
}
.hdr_top_variation4 {
    background: url(../images/common_in_all/main_header_bg.jpg) repeat-x bottom #fff;
    border-top: 3px solid #7fa319;
    position: relative;
}
.hdr_top_variation4 ul li::after {
    display: none
}
.hdr_top_variation4 ul {
    margin: 25px 0px;
    padding: 0px;
    float: right;
}
.hdr_top_variation4 ul li {
    list-style: none;
    float: left;
    padding-left: 48px;
    position: relative;
    padding-right: 22px;
    margin-right: 22px;
    padding-top: 4px;
    padding-bottom: 4px;
}
    <div class="hdr_top_bar">
      <div class="container">
        <div class="row">
          <div class="col-lg-5 col-md-6 col-sm-5 col-xs-12 mobile_none"><span class="landing_gardening_txt">JARDINESS Y IMPIEZAS DE TODO</span></div>
          <div class="col-lg-5 col-md-6 col-sm-7 col-xs-12 hdr_cnt">
            <ul>
              <li class="hdr_msg_icon"><a href="#">[email protected] </a></li>
              <li class="hdr_call_icon">699 99 99 99</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

2
  • 2
    Podrías poner un ejemplo de lo que deseas lograr? algo editado en paint aunque sea.
    – Fran Islas
    Commented el 19 nov. 2018 a las 23:03
  • Gracias por la aclaración @FranIslas, edite añadiendo dos capturas, con las que espero ayuden. Commented el 19 nov. 2018 a las 23:31

1 respuesta 1

2

Si no te entendí mal, es lo que deseas lograr. Solo corregí las dimensiones de las columnas. Dejando col-md-6 para lograr que en las pantallas medianas o mas grandes ocupen la mitad de la linea o "row" como le quieras llamar. En el resto de las pantallas (xs o sm) se van a mostrar uno abajo del otro. Me parece lo mas ordenado. Saludos!

Editada: Edité el tamaño de las columnas, asignando solo 4 columnas para el titulo y 8 columnas para los datos.

.hdr_top_bar {
    background: #33381e;
    padding: 8px 0px 9px;
}
.hdr_top_bar.hdr_top_bar_var2 {
    background: rgba(0, 0, 0, .4);
    padding: 11px 0px 12px;
}
.hdr_top_bar.hdr_top_bar_var3 {
    background: none;
    border-bottom: 1px solid #776250;
    padding: 7px 0px;
    margin-bottom: 7px;
}
.landing_gardening_txt {
    font-size: 18px;
    color: #7f9a48;
    font-style: italic;
    float: left;
    margin: 3px 0px;
}
.landing_gardening_txt.land_garden_txtvar2 {
    color: #fff;
}
.hdr_cnt {
    float: right;
}
.hdr_cnt ul {
    margin: 1px 0px 0px;
    padding: 0px;
    float: right;
}
.hdr_cnt ul li {
    float: left;
    font-size: 18px;
    font-weight: 400;
    font-style: italic;
    color: #abb488;
    margin-right: 28px;
    line-height: 29px;
}
.hdr_cnt ul li.cnt_white_color {
    color: #a2a4a5;
}
.hdr_cnt ul li:last-child {
    margin-right: 0px;
}
.hdr_cnt ul li a {
    color: #abb488;
    text-decoration: none;
}
.hdr_cnt ul li a.cnt_white_color {
    color: #fff;
}
.hdr_cnt ul li.var3_white {
    color: #fff;
}
.hdr_cnt ul li a.var3_white {
    color: #fff;
}
.hdr_msg_icon {
    background: url(../images/common_in_all/msg_icon.png) no-repeat 0px 6px;
    padding-left: 42px;
    font-size: 16px;
}
.hdr_call_icon {
    background: url(../images/common_in_all/call_icon.png) no-repeat 0px 6px;
    padding-left: 34px;
    font-size: 18px;
}
.hdr_msg_icon.white_msg_icon {
    background: url(../images/common_in_all/white_msg_icon.png) no-repeat 0px 6px;
}
.hdr_call_icon.white_call_icon {
    background: url(../images/common_in_all/white_call_icon.png) no-repeat 0px 6px;
}
.hdr_top_variation4 {
    background: url(../images/common_in_all/main_header_bg.jpg) repeat-x bottom #fff;
    border-top: 3px solid #7fa319;
    position: relative;
}
.hdr_top_variation4 ul li::after {
    display: none
}
.hdr_top_variation4 ul {
    margin: 25px 0px;
    padding: 0px;
    float: right;
}
.hdr_top_variation4 ul li {
    list-style: none;
    float: left;
    padding-left: 48px;
    position: relative;
    padding-right: 22px;
    margin-right: 22px;
    padding-top: 4px;
    padding-bottom: 4px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 
 
 <div class="hdr_top_bar">
      <div class="container">
        <div class="row">
          <div class="col-md-4 mobile_none"><span class="landing_gardening_txt">JARDINESS Y IMPIEZAS DE TODO</span></div>
          <div class="col-md-8 hdr_cnt">
            <ul>
              <li class="hdr_msg_icon"><a href="#">[email protected] </a></li>
              <li class="hdr_call_icon">699 99 99 99</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

3
  • He probado y sigue mostrándose como en la primera imagen que mostré, el email y el teléfono en lineas diferentes. no se como desplazar el icono del email hacia el centro de la pantalla. Commented el 20 nov. 2018 a las 0:11
  • 1
    Según la ejecución de mi código, se muestra todo en una sola linea. Puedes probar achicar aun mas el tamaño de la primera columna. Ya edité la respuesta con el cambio. Si no lo logras hacer de este modo, habría que ver que no hayan otros estilos que estén rompiendo la estructura.
    – Fran Islas
    Commented el 20 nov. 2018 a las 0:29
  • Funciona @FranIslas, solo que en dispositivos de 320 x 568, Iphone 4, Iphone 5, se esconden los textos a la izquierda. Buscare alguna solución. ¿ Cual fue la primera opcion que pusistes, la primera columna de 6 ? Commented el 20 nov. 2018 a las 0:45

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.