Media Queries

Em virtude da exigência de por o nosso projeto(site) todo responsivo, utilizamos, basicamente, em todas as páginas o @media, ou seja, media queries, pois como o header e o footer estão presente em todas as páginas, é indubitável a necessidade de utilizá-lo.

Portanto, os @media podem ser encontrado no diretório css/index.css, com os seguintes códigos:

       /* @medias para a responsividade das páginas, tanto em
        smartphones, como em tablets */
        
        @media (min-width:992px) {
            .container {
                max-width: 992px;
                margin: 0 auto
            }
            .coluna-area-2 {
                width: 16.66%
            }
            .coluna-area-3 {
                width: 28.999999%
            }
            .coluna-lugar-1 {
                margin-left: 8.333333%;
            }
        }
        
        @media (min-width:1200px) {
            .container {
                max-width: 1200px
            }
        }
        
        @media (max-width: 992px) {
            #logo img {
                font-size: 30px;
                margin-bottom: 20px;
            }
            #logo {
                left: -130px;
            }
            #header,
            #header nav {
                text-align: center
            }
            .checkbtn {
                display: block;
            }
            .navegacao ul {
                position: fixed;
                width: 100%;
                height: 100vh;
                background: lightblue;
                top: 80px;
                left: -100%;
                text-align: center;
                transition: all .5s;
            }
            .navegacao ul li {
                display: block;
                margin: 50px 0;
                line-height: 30px;
            }
            .navegacao ul li a {
                font-size: 20px;
            }
            .navegacao a:hover,
            .navegacao a.active {
                background: none;
                color: white;
            }
            #check:checked~ul {
                left: 0;
            }
        }
        /* media query da tabela para todos os dispositivos com no máximo 800px*/
        
        @media all and (max-width:800px) {
            .tabela tbody tr td {
                display: block;
                text-align: center;
                border: none;
            }
            table {
                border: none;
                width: 80%;
            }
            .tabela tbody tr td :before {
                content: "";
                position: absolute;
                display: block;
                border: none;
                text-align: center;
            }
            .tabela .leis {
                font-size: 18px;
                font-weight: 700;
                background-color: rgba(125, 201, 224, 0.16);
                border: none;
                padding: 7px;
            }
            .tabela .leiseven {
                background-color: rgba(45, 121, 145, 0.185);
                font-size: 18px;
                font-weight: 700;
                border: none;
                padding: 7px;
            }
            .tabela thead {
                display: none;
                border: none;
            }
            table tbody tr {
                display: block;
                border: 1px solid black;
            }
            .tabela td,
            th {
                border: none;
            }
            .tabela tbody {
                border: none;
            }
        }