Problemas de design no blog: menu e logo distorcidos ao redimensionar a janela

  • Autor Autor Varian
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
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 edição:
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
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.
 
Voltar
Topo