Problemas diseño blog: menú y logo distorsionados al redimensionar ventana

Varian Seguir

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
16 Sep 2012
Mensajes
530
Muy buenas, tras buscar tutoriales por toda la red, intentando aprender en el tema de diseño y dar solución a mi problema, me doy por vencido, no se como solucionarlo.

Se trata de un blog al cual instalé un Template (SoraTemplates), he añadido el menú y el logo del blog. Al parecer es un diseño responsive, cuando estrecho la ventana del navegador, el menú se deforma y el logo de R.Canovas. se pixela, todo se descuadra.

¿Sabéis como solucionarlo? Me gustaría que se quedase fijo, con una barra de scroll horizontal, o quizá, hacer el logo vectorial y añadir un menú nuevo, aunque no me gusta la idea :fatigue:

El blog es: www.rcanovasmk.blogspot.co.uk

Muchas gracias compañeros!
 
Última edición:

Angel Benites

VIP
1
Ni
Verificación en dos pasos activada
Verificado por Whatsapp
Suscripción a IA
Desde
1 May 2013
Mensajes
3.650
Para que la imagen no se pixele te recomiendo que uses la extension .svg de Adobe Ilustrator (Es una alternativa)

Se pixelea porque es chico.. la imagen y al hacerle el zoom reacciona asi..
 

rh0b3rt0

Delta
Redactor
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
26 Dic 2013
Mensajes
523
hola amigo acabo checar que la main osea el contenido de post tiene mas que el sidebar te recomiendo que te bases de los 1000px que tiene el diseño ya que si el sidebar lo pones 380 y main 680 se pasa ya que sería = 1160px y la función de 1000px ya no existe
 

Varian

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
16 Sep 2012
Mensajes
530
¿Donde puedo cambiar eso? ¿En la parte de estilos?

Quizá esté aquí...

#Blog1{float:left}
/*===========================================
Do Not Change This is Layout Styling CSS
==========================================*/
body#layout .header-wrapper{margin-top:60px;position:relative;height:auto\9;width:980px}
body#layout .header-inner-wrap{width:100%}
body#layout #content{width:100%;float:right}
body#layout .sidebar-wrapper{float:right;width:30%}
body#layout #header{width:100%;margin:0;padding:0}
body#layout .outer-wrapper,body#layout .sidebar-wrapper,body#layout .ct-wrapper,body#layout .container{overflow:auto;margin:0;padding:0}
body#layout div.footer{font-family:sans-serif;display:inline-table;position:relative;float:left;max-width:25%;margin:0 auto 2px;padding:0 0 10px}
body#layout #Blog1{float:none}
body#layout #main{clear:both;position:relative;margin:3em 0 0;padding:2em 0 0}
body#layout .main-wrapper{width:65%;float:left;position:relative;display:inline-block}
.header-inner-wrap {z-index: 10;position: relative;}
.post-footer-line.post-footer-line-2 {padding: 2% 0;margin: 0% 0;}
.PopularPosts img{padding: 2px!important;}
#header img {
border: 0 none;
background: none;
width: 100%;
height: auto;
margin: 10% 1% 0;
}
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
2
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );
3

4
function remove_width_attribute( $html ) {
5
$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
6
return $html;
7
}
 

Henry Valdez

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
24 Mar 2012
Mensajes
366
La plantilla es un intento fallido de Responsive Design. Para que no se pixelice, fíjale un máximo al logo.

HTML:
#header img {
max-width: 200px;
}

Lo puse 200px porque es el tamaño original de la imagen, saludos
 

Varian

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
16 Sep 2012
Mensajes
530
La imagen ha quedado perfecta! Muchas gracias! Ahora solo queda el ancho de página que no cambie el menú... ¿es igual?
 

Varian

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
16 Sep 2012
Mensajes
530
Cuando haces estrecha la ventana del navegador, el menú se apila saliéndose de la zona más blanca.
 

Varian

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
16 Sep 2012
Mensajes
530
Muchas gracias a todos, lo tengo solucionado, ya se puede cerrar el tema.
 
Arriba