Cita:
Iniciado por laura_moreno14 
he intentado hacer esta web con responsible desing pero tengo un par de dudas, haber si alguien puede ayudarme.
1. usando las media queries no puedo cambiar la altura del div header cuando cambio de resolucion.
perdon que sin querer no termine el mensaje
2. no consigo alinear los botones de seguir y me gusta
Código:
* { margin: 0; padding: 0; list-style-position:inside;}
html { font-size:100%; height:100%; font-family:Arial, Helvetica, sans-serif;}
body { width:100%; font-size:0.8em;}
/*Header*/
header { width:100%; background:#282828; overflow:hidden; height:100px; box-shadow: 0px 0px 7px #000;}
#titulo a { width:18%; color:#FFF; float:left; font-size:4em; font-weight:bold; text-decoration:none; margin-left:1%; padding:0.6%; font-family: 'Alegreya SC';}
#social { width:15%; float:right; margin:1.7% 0 1% 1%;}
#social li { float:left; list-style:none; margin: 2%; opacity:0.5;}
#social li:hover { opacity:1;}
/* Nav*/
nav { width:98%;background:#93d22b; overflow:hidden; margin:1%;-moz-border-radius: 34px; border-radius: 4px;}
#menu { width:67%; float:left; font-size:1.2em; list-style: none;}
#menu a { color: #fff;float:left; text-decoration: none; font-weight: bold;}
#menu a:hover { color: #fff;}
#menu li { float:left; padding: 3.5% 2.7% 3.5% 2.7%;}
#menu li:hover { float:left; padding: 3.5% 2.7% 3.5% 2.7%;background:#B3EE44;}
.buscador { width:30%;float:right; margin:1%; padding:0.5%;}
#search { width:80%;}
/*index, single, page*/
#wrapper { width:98%; margin: 0 auto; overflow:hidden; padding:1%;}
#contenedor2 { width:73%; float:left;}
#posts { width:94%; margin:3%; overflow:hidden;}
#posts a { color:#93d22b;}
#posts .printfriendly { float:right; text-decoration:none; color:#000;}
#posts .printfriendly:hover{ text-decoration:underline;}
#social2 {}
.twitter-share-button { margin-top:1%; padding:0;}
.fb-like { margin-bottom:1%; padding:0;}
p img { display:block; margin:auto; }
.metabox { margin: 2% 0; overflow:hidden;}
.metabox a{ color:#93d22b; text-decoration: none;}
.metabox a:hover { text-decoration:underline; color:#B3EE44;}
.meta {
background-repeat: no-repeat;
padding-left:20px;
margin-bottom: 4px;
float:left;
height:16px;
background-position: center left;
}
.category {background-image: url(images/cate.png);}
.tags{background-image: url(images/tag.png);}
#previus { width:50%; float:left;}
#next { width:50%; float:left; text-align:right;}
#coments { margin-top:5%;}
/* Comments! */
ol.commentlist {list-style-type: none; width:100%;position:relative;}
ol.commentlist li {width:95%;overflow:hidden;background: #e1e1e1;-webkit-border-radius: 10px;border-radius: 10px;border: 1px solid #ccc;padding:2%;margin: 2% 0;}
.comment-author { width: 60%;float:left;height:40px;}
.comment-author img {float:left;border: 1px solid #ccc;margin: 2px;}
.fn { color: #2d435a;font-weight:bold;font-size:14px;}
.says {}
.comment-meta { width: 40%;float:left;height:40px;text-align:right;overflow:hidden;}
.comment-awaiting-moderation { width:100%; margin-right:10px; text-align:right;}
.comment-meta a {}
ol.commentlist li p {}
.reply a {padding: 1%; background: #666; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #ccc; color:#FFF; text-decoration:none; margin:1%; float:left;}
input { margin-bottom: 1%;}
/*category: biblioteca*/
li.cat-item { list-style:none; padding:3%; border-bottom:1px #B3EE44 dashed;}
li.cat-item:hover { background:#DBF86B;}
/*archive*/
.cat{ overflow:hidden; border-bottom:1px #B3EE44 dashed; padding:3%;}
.cat:hover {background:#DBF86B;}
.enlace { float:left;width:100%; display:block; margin-bottom:2%;}
.enlace h1 a{text-decoration:none;}
.enlace h1 a:hover{text-decoration:underline;}
.contenedor { width:100%; float:left;}
.imagen { float:left; width:25%; display:block;}
.resumen { float:right; width:75%; display:block;}
.mas{ margin-top:3%; width:20%;}
.mas a { text-decoration:none;}
.mas a:hover { text-decoration:underline;}
/*sidebar*/
aside { width:25%; float:right; margin:0.8%;}
aside #buscador { display:none; }
.widget { overflow:hidden; width:88%; margin-bottom:3%; padding:0 6% 6% 6%;}
.widget li { text-decoration:none; list-style:none; border-top:1px #B3EE44 dashed; padding:3%;}
.widget li:hover { background:#DBF86B; text-decoration:none;}
.widget a { text-decoration:none; color:#000; }
.widget a:hover { text-decoration: none; color:#FFF;}
.encab { font-size:1.3em; font-weight:bold; color:#000; margin-bottom: 3%;}
.tagcloud a{ width:auto; float:left; height:auto; background: #93d22b; margin: 1%; padding:1%; color:#FFF; font-weight:bold; -moz-border-radius: 4px; border-radius: 4px;}
.tagcloud a:hover{background:#B3EE44; color:#FFF; -moz-border-radius: 4px; border-radius: 4px;}
/*paginacion*/
.pagenavi {margin:3% 0 5% 0;float:left;width: 100%;}
.pagenavi a {padding: 1%;margin-right: 1%;text-decoration: none;border: 0.1em solid #eee;color: #000;}
.pagenavi a:hover {border: .1em solid #000;color: #000;background-color: #eee;}
.pagenavi span.pages {padding: 1%;margin-right: 0.8%;color: #000;font-weight:bold;border: .1em solid #999;}
.pagenavi span.current {padding: 1%;margin-right: 0.8%;font-weight:bold; border: 0.1em solid #666;color: #000;}
.pagenavi span.expand {padding: 0;margin: 0;border: .1em solid #ccc;color: #000;}
.pagenavi .first, .pagenavi .last { border: .1em solid #aaa;}
.pagenavi .single_page {border: 1px solid #ccc;}
/*resultados de busqueda*/
/*footer*/
footer { width:97%; background:#000; overflow:hidden; font-size: 1.2em; padding:1.5% 1.5% 0.5% 1.5%;}
footer a { color:#FFF; text-decoration:none;}
footer a:hover { color:#93d22b;}
#colabora { width:100%; padding:1%;}
#colabora .encab { color:#93d22b; margin-bottom:0.5%;}
#colabora li { list-style:none;}
#enlaces { width:100%; overflow:hidden;}
#enlaces li { float:right; color:#FFF; list-style:none; margin: 1% 1% 1% 2%}
/* Large screens ----------- */
@media screen and (min-width : 1300px) {
#titulo a { font-size:4.8em;}
#social { width:15%; float:right; margin:2.5% 0 1% 1%;}
nav { width:18%; float:left; margin:1% 1% 1% 0;}
#menu { width:100%; overflow:hidden; font-size:1.4em; list-style: none;}
#menu a { color: #fff; overflow:hidden; text-decoration: none; font-weight: bold;}
#menu a:hover { color: #fff;}
#menu li { width:92%;overflow:hidden; padding: 5% 0 5% 8%;}
#menu li:hover { float:left; padding: 5% 0 5% 8%;background:#B3EE44;}
.buscador { display:none; width:90%;float:right; margin:1%; padding:3% 0 10% 0;}
#posts { width:74%; float:right;}
p img { min-width:500px;}
#imagen {width:30%;}
#resumen { width:70%;}
}
/* iPads (portrait and landscape) ----------- */
@media screen and (max-width : 1050px) {
#titulo a { width:18%; color:#FFF; float:left; font-size:3.5em; font-weight:bold; text-decoration:none; margin-left:2%; padding:1%; font-family: 'Alegreya SC';}
#social { width:20%; float:right; margin:1.7% 0 1% 1%;}
#social li { float:left; list-style:none; margin: 2%;}
#menu { width: 75%; font-size: 1.1em;}
#menu li { float:left; padding: 2.5% 1.7% 2.5% 1.7%;}
#menu li:hover { float:left; padding: 2.5% 1.7% 2.5% 1.7%;}
.buscador { width: 22%; margin:1%; padding:0.2%;}
aside { width:25%; margin:0.8%;}
aside .buscador { display:none;}
}
/* iPads (portrait and landscape) ----------- */
@media screen and (max-width : 820px) {
#social { width:25%; float:right; margin:3% 0 1% 1%;}
#social li { float:left; list-style:none; margin: 2%;}
header #buscador { visibility:visible; width: 100%;}
#menu { width: 100%; font-size: 1em;}
#menu li { float:left; padding: 2.5% 2.3% 2.5% 2.3%;}
#menu li:hover { float:left; padding: 2.5% 2.3% 2.5% 2.3%;}
.buscador { display:none;}
#contenedor2{ width:68%;}
#posts h1 { font-size:1.7em;}
#imagen { float:none; margin: 2% auto;}
#resumen {width:100%; float:none}
aside { width:30%; margin:0.8%;}
aside .buscador { display:block; width:90%; margin:0 0 5% 10%;}
}
/* Smartphones (portrait and landscape) ----------- */
@media screen and (max-width : 480px) {
#header { height:50px; float:none;}
#titulo a { font-size:2.5em; padding:0.7%; margin-top:5%;}
#social { width:27%; float:right; margin:8% 0 1% 1%;}
#social li { float:left; list-style:none; margin: 0; opacity:0.5;}
#social li img { height:30px;}
#posts .printfriendly { font-size: 0.8em; }
#posts .printfriendly img{ height: 10px; }
#contenedor2 { width:100%;}
#imagen { float:none; margin: 2% auto;}
#resumen {width:100%; float:none}
aside { width:98%; margin:0.8%;}
footer { font-size: 1em;}
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 360px) {
#titulo a { font-size:2em;}
#social { width:30%;}
#posts h1 { font-size:1.2em;}
#posts img { max-width:300px;}
#social li img { height:20px;}
#imagen { float:none; margin: 2% auto;}
#resumen {width:100%; float:none}
#menu { font-size: 0.9em;}
}