Depois de criarmos a base para o site e adicionarmos capacidades responsivas, nesta edição vamos continuar a adicionar mais conteúdo à nossa página responsiva, desta vez inserindo um rodapé e excertos de artigos.
Foram adicionadas 3 imagens à nossa pequena página HTML, que serão mostradas em linha até serem forçadas a dividirem-se, aos 900 píxeis, passando a serem apresentadas na vertical, graças ao display:block. O mesmo acontecerá ao rodapé que, ao mesmo tempo que as imagens, irá passar a ter a largura total da página e a ser mostrado na vertical.
O wrapper foi reduzido em 30 píxeis, devido à largura da barra de scroll, que conta como se fosse parte do conteúdo da página.
Deixo aqui um excerto do código HTML, relativo às alterações mencionadas acima:
Repare que o rodapé/footer não foi colocado dentro do mesmo wrapper utilizado para o conteúdo da página. Isto é apenas por questões estéticas e de organização do conteúdo, sendo também bastante comum que toda a página esteja limitada pelo mesmo wrapper.
As media queries foram ligeiramente alteradas em relação ao publicado na semana passada, isto porque o conteúdo exigiu que assim fosse. As media queries por norma são definidas consoante o conteúdo, sendo adicionadas à medida que o conteúdo for ficando desformatado quando as dimensões começam a reduzir.
Código CSS
body,html{
margin:0px;
padding:0px;
}
body{
background-color:#DDD;
}
.wrapper{
max-width:1170px;
width:100%;
background-color:white;
margin:20px auto;
text-align:center;
}
h1{
text-align:center;
margin:0px;
padding:10px 0px;
font-size:300%;
color:#333;
}
a{
color:black;
text-decoration:none;
}
#content{
font-size:0px; /* Para fazer com que as imagens não tenham espaços no meio (?) */
text-align:center; /*Para centrar as imagens (quando ficar mais pequeno). */
}
.home_box{
font-size:16px;
display:inline-block;
width:390px;
padding-bottom:10px;
vertical-align:top
}
.home_box img{
width:390px;
transition:all 0.5s ease-in-out;
}
.home_box h3{
margin:3px 0px;
text-align:center;
}
.home_box p{
padding: 0px 6px;
margin: 3px 0px;
}
footer {
background-color: #eee;
width: 100%;
text-align: center;
border-top:solid 5px #ddd;
}
footer table{
margin:auto;
width:100%;
}
footer table td{
padding-bottom:20px;
width:32%;
vertical-align:top;
border-right:solid 1px #CCC;
}
footer table td:last-child{
border:0px;
}
footer span, footer a{
letter-spacing:2px;
}
footer .wrapper{
margin-bottom:0px;
}
@media only screen and (max-width: 1200px) {
.wrapper{
margin:0px auto;
padding:0px 7px;
box-sizing:border-box;
}
.home_box{
width:290px;
}
.home_box img{
width:290px;
}
footer table{
width:870px;
}
}
@media only screen and (max-width: 900px) {
h1{
font-size:250%;
}
#content{
padding-top:20px;
}
.home_box{
width:100%;
display:block;
}
.home_box img{
width:100%;
max-width:300px;
}
footer table td{
display:block;
width:100%;
border-right:0px;
border-bottom:solid 1px #CCC;
}
footer table td:last-child{
border:0px;
}
footer table{
width:100%;
}
}
@media only screen and (max-width: 400px) {
h1{
font-size:200%;
}
}
/* O código abaixo serve exclusivamente para o slider */
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
Porém, vale a pena referir que existem programadores Web que sugerem que se usem as dimensões “standard” dos dispositivos, sendo elas 1200px, 992px, 768px, 480px e 320px. Estas dimensões poderão variar ligeiramente, onde neste caso foram baseadas nas utilizadas pelo Bootstrap.
Poderá visualizar todo o estado actual do projecto aqui ou descarregá-lo aqui. Poderá ver aqui também que, tal como a semana passada, a página desenvolvida está a cumprir todos os requisitos da Google.
Sinta-se à vontade para colocar questões e apresentar sugestões do que gostaria que fosse debatido nas próximas edições. Até à próxima semana.