Problemas con la visibilidad de logotipos en diseño web

josemanuelprz24 · 22 Ene 2015

Hola Betas buen día

El problema que se me esta presentando es el siguiente.

Esta es la pagina, donde se esta haciendo el diseño.

Las 3 Marías

El inconveniente surge, cuando se hace pequeña la ventana del navegador, desaparece el logo principal y el logo de la navegación del menú, yo pienso que es los los CSS.

Habra solución para esto.

Gracias, saludos.

SnakeNet · 22 Ene 2015

Hola,

Al ser responsive le manda la acción de que no se visualize pero puedes hacer también que se reduzca el código que esta usando es este:

Insertar CODE, HTML o PHP:

@media all and (max-width: 767px){

    .mobile-toggle{ display: block; cursor: pointer; font-size: 40px; top: 15px; color: #444; z-index: 200; }
    .menu{ margin: 0px; }
    .menu li{ float: none; margin: 0px 0px 11px 0px; }
    #navigation{ position: fixed !important; background: #rgba(255,255,255,0.9) !important; top: 0px; padding-top: 73px; max-height: 50px;  }
    #navigation .text-center{ text-align: left !important; }
    #logo{ display: none; }
    .headline{ margin-bottom: 11px; }
    .headline-logo{ display: none; }
    .content-divider{ /*display: none;*/ }
    #stats{ display: none; }
    #clients{ display: none; }
    #blog{ display: none; }
    .stat{ margin-bottom: 22px; }
    .slide-content{ padding-top: 150px !important; }
    .title-upper{ display: none; }
    .title-icon{ display: none; }
    
    .bg-cover{ background-attachment: scroll !important; }
    
    .page-title h1{ font-size: 48px; }
    
    
    .process-phase{ text-align: center; }
    .phase-icon{ margin: 0px 0px 22px 0px; display: inline-block; float: none !important; }
    .phase-text{ float: none; min-width: 100%; }
        
    .project-slider{ margin-bottom: 22px; }
    .filters li{ margin-right: 11px; }
    
    #home-slider .slides li h1{ font-size: 68px; letter-spacing: 0px; right: 0px; }
    #home-slider .slides li p{ font-size: 1em; }
    #home-slider .slides li .btn{ display: none; }
    #home-slider .slides li{ background-size: cover !important; }
    
    .testimonials-slider h1{ font-size: 38px; }
    
    .pricing-table{ margin-bottom: 44px; }


}

Si quitas .headline-logo{ display: none; } o lo cambias se te verá la imagen deberás adaptarla a como a ti te guste que salga.

Se ve así sin la linea esa

josemanuelprz24 · 22 Ene 2015

Hola

Gracias por la respuesta inmediata, ya logre solucionar ese problema con lo que me indicaste, sin embargo queda otra duda al aire, en la parte rosa, se supone que también debe quedar un logo pequeño, y también se oculta, tenia la propiedad Display:none, ya se la quite y sigue estando oculto.

Alguna solución

Gracias por su ayuda.

SnakeNet · 22 Ene 2015

Remplaza el css de #logo por esto :

Insertar CODE, HTML o PHP:

#logo{ max-width:100%; margin-top: -220px;}

josemanuelprz24 · 22 Ene 2015

Ya lo coloque correctamente, y funciona, solo hay un pequeño detalle, antes de que llegue a ese ancho, no se muestra anexo la imagen

SnakeNet · 22 Ene 2015

Pues quita el css de esa parte y pon esto:

Insertar CODE, HTML o PHP:

[COLOR=#000000]@media all and (max-width: 767px){
[/COLOR]#logo{ max-width:100%; margin-top: -220px;}}

Y cámbiale el valor a 767

josemanuelprz24 · 23 Ene 2015

Disculpa, soy nuevo en esto.

Ya cambie los valores de

HTML:

@media all and (max-width: 767px)

a un numero superior y también inferior, además de que agregue otra linea de media queries para hacer las pruebas y no funciono.

En este momento lo deje como esta antes es decir.

HTML:

media all and (max-width: 767px){
#logo{ max-width:100%; margin-top: -220px; }

Problemas con la visibilidad de logotipos en diseño web

josemanuelprz24

SnakeNet

josemanuelprz24

SnakeNet

josemanuelprz24

SnakeNet

josemanuelprz24

Temas similares