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

  • Autor Autor Varian
  • Fecha de inicio Fecha de inicio
Varian

Varian

Delta
Verificación en dos pasos activada
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:
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..
 
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
 
¿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
}
 
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
 
La imagen ha quedado perfecta! Muchas gracias! Ahora solo queda el ancho de página que no cambie el menú... ¿es igual?
 
Que ancho? no entiendo, sea más específico
 
Cuando haces estrecha la ventana del navegador, el menú se apila saliéndose de la zona más blanca.
 
HTML:
.header-inner-wrap {
max-width: 200px;
}
 
Muchas gracias a todos, lo tengo solucionado, ya se puede cerrar el tema.
 
Atrás
Arriba