Curso de Design Responsivo Aula 23 Ajustando site com Media Queries

Nessa vídeo aula vamos aprender como ajustar nosso site utilizando Media Queries de diferentes formas fazendo que o nosso site atenda diferentes tipos de dispositivos independente do tamanho de tela ou resolução.

Código CSS desenvolvido na vídeo aula 

Arquivo estilos.css

@media(max-width: 960px){
    .formularioBusca {
        width: 100%;
        margin-top: -40px
    }
    .slide {
        min-height: 300px
    }
    #slideshow-banner ul .slideshow-item {
        height: 300px
    }
}
@media(max-width: 480px){
    .logo {
        width: 250px  
    }
    h1,h2,h3 {
        font-size: 1.5em
    }
    .estatisticas li {
        display: block
    }
    .estatisticas p:first-child {
        font-size: 3em
    }
    .slide {
        min-height: 200px
    }
    #slideshow-banner ul .slideshow-item {
        height: 200px
    }
}
@media screen and (min-width: 1024px) and (max-width: 1380px){
    .destaque h2 {
        font-size: 3em
    }
    .destaque h3 {
        font-size: 2em
    }
}
@media screen and (min-width: 480px) and (max-width: 640px){
    .galeria img {
        height: 250px
    }
}

Arquivo caixas.css

@media screen and (max-width: 1024px){
    .conteudo{width: 95%}
}
@media screen and (max-width: 480px){
    .conteudo{width: 100%}
    .caixa {margin: 5px}
}

 



Hospedagem Profissional de Sites