Question

Me podrías decir como puedo poner el logo para que no se superponga a la imagen de cabecera de mi página
http://www.andamiosystems.com/

En chrome se ve bien pero en firefox y en los navegadores de los dispositivos móviles aparece superpuesta

Muchas gracias

Answer 1

Hola @gonzalss,

opcion 1:

que tal si le das background-position a ese elemento <section>,

.main-header {
    background-position: 230px 9px;
}

---

opcion 2:

que tal si usas elementos flotantes.

<div class="logo-1">
    <img src="logo-1.png">
</div>
<div class="logo-2">
    <img src="logo-2.png">
</div>

.logo-1, .logo-2 {
    float: left;
    margin-right: 20px;
}

nota: el contenedor de estos elementos flotantes debe tener un alto fijo o usar clearfix.

Answer 2

Puedes utilizar flexbox y darle un ancho fijo tanto al logo y al header.

<header>
    <section class="logo">
        <img src="logo.png" >
    </section>
    <section class="header">
        <img src="header.png" >
        <section class="text">
            Teléfonos, Emails, etc.
        </section>
    </section>
</header>

Al logo le das 20% de ancho y el restante a la imagen de cabecera:

header {
    background-color: #eee;
    display: flex;
    height: 90px;
}
header > * {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
}
header > .logo {
    width: 20%;
}
header > .logo > img {
    background-size: cover;
    height: 80px;
    width: 80px;
}
header > .header {
    display: block;
    height: 100%;
    width: 80%;
}
header > .header > img {
    background-size: cover;
    display: block;
    height: 100%;
    width: 100%;
}

Y de esta manera, con flexbox nunca se van a superponer las imágenes. Alternativamente puedes eliminar el logo y dejar solo la cabecera cuando la pantalla sea X ancho:

@media screen and (max-width:500px) {
    header > .logo {
        width: 0px;
    }
    header > .header {
        width: 100%;
}

Click aquí para ver la demo