1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.
  2. COVID-19 Mantenham-se seguros: Pratiquem distanciamento físico de 2 metros. Lavem as mãos. Fiquem em casa.
    Informação sobre COVID-19. Ajuda a combater o COVID-19 com o [email protected] e com o [email protected].
    Remover anúncio
  3. Informação: A partir da 1:00 (0:00 nos Açores) desta Segunda-feira, 6 de Julho, haverá alguns períodos de inacessibilidade ao fórum e restantes sites da ZWAME (Comparador, Jogos, Portal, etc).
    Se necessário faremos actualizações via Twitter e Facebook.
    Remover anúncio

Responsividade Site

Discussão em 'Web Development' iniciada por Programar2020, 29 de Junho de 2020 às 13:07. (Respostas: 13; Visualizações: 400)

  1. Boa Tarde


    Como é que eu coloco o site responsivo ?

    HTML:
        <section class="mt-5" id="menu">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <h2 class="text-center" id="menu_images">Menu</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <nav class="section_menu__nav">
                            <ul>
                                <li class="active">
                                    <a href="#menu_images" data-filter="1">Almoço & Jantar</a>
                                </li>
                                <li>
                                    <a href="#menu_images" data-filter="2">Bebidas</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <div class="row filter-container">
                    <div class="col-md-6 filtr-item" data-category="1" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/5.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Picanha Grelhada</h4>
                                    <p>Acompanhamento: Arroz, Batatas Fritas</p>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">15,00€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="2" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/11.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Vinho Verde Gazela</h4>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">5,00€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="1" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/6.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Filetes de Pescada </h4>
                                    <p>Acompanhamento: Arroz, Salada, Limão, Salsa</p>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">9,50€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="2" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/12.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Vinho Tinto Qtª da Espiga</h4>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">95,00€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="1" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/7.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Entrecosto Grelhado</h4>
                                    <p>Acompanhamento: Batatas Assadas, Arroz, Limão, Cebola</p>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">12,50€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="2" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/13.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Vinho Tinto Barca Velha</h4>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">650,00€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="1" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/8.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Sardinhas Grelhadas</h4>
                                    <p>Acompanhamento: Batatas Cozidas, Limão, Molho à Escabeche</p>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">13,50€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="2" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/14.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Vinho Tinto Mouchão</h4>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">175,00€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="1" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/9.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Salmão Assado</h4>
                                    <p>Acompanhamento: Molho de Cogumelos</p>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">7,50€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="2" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/16.png" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Quinta dos Carvalhais Tinto</h4>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">8.50€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="1" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/10.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Bifinhos de Frango</h4>
                                    <p>Acompanhamento: Puré de Batata Doce</p>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">10,00€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="2" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/15.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Rótulo Touriga Nacional</h4>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">6.50€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
    Código:
    .section_menu__item__price{
        margin-top: 0;
        margin-bottom: .5rem;
    }
    
    .section_menu__item__price{
        font-family: Playfair Display,serif;
        font-weight: 400;
        line-height: 1.42857;
        margin-bottom: .5rem;
        color: #151515;
    }
    
    .section_menu__item__price{
        margin-bottom: .8em;
    }
    
    .section_menu__item__price{
        font-size: 1.375rem;
    }
    
    .section_menu__item {
        padding: 1rem 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .section_menu__item__img {
        position: relative;
        overflow: hidden;
        height: 0;
        padding-bottom: 100%;
    }
    
    .section_menu__item__img>img {
        position: absolute;
        top: 0;
        left: 0;
        width: auto;
        max-width: 1000px!important;
        height: 100%!important;
        max-height: 100%;
    }
    
    .section_menu__nav>ul {
        padding-left: 0;
        list-style-type: none;
        text-align: center;
    }
    
    .section_menu__nav>ul>li {
        display: inline-block;
    }
    
    .section_menu__nav>ul>li>a {
        font-family: Lato,sans-serif;
        font-size: .75rem;
        font-weight: 900;
        position: relative;
        display: block;
        padding: 1rem;
        transition: color .1s;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #777;
    }
    
    .section_menu__nav>ul>li>a:active,.section_menu__nav>ul>li>a:active:focus,.section_menu__nav>ul>li>a:active:hover,.section_menu__nav>ul>li>a:focus,.section_menu__nav>ul>li>a:hover {
        text-decoration: none;
        color: #151515;
    }
    
    .section_menu__nav>ul>li.active>a:after {
        transform: translateY(0);
        opacity: 1;
    }
    https://prnt.sc/t8fs6e

    https://prnt.sc/t8fs8b

    https://prnt.sc/t8fsce

    https://prnt.sc/t8fsda

    Como podem ver à medida que o site vai "encurtando" perde-se responsividade. Como é que resolvo este problema ?
     
  2. cd23

    cd23 Power Member

    Pelo que vejo parece que estás a usar Bootstrap. Dá uma olhada na documentação.
     
  3. Já vi, e não encontro a solução. Eu sei que o bootstrap confere responsividade por padrão, não percebo é porque o site perde responsividade à algumas resoluções.
     
  4. Suicide-Squad

    Suicide-Squad Power Member

    Está a perder porque no teu CSS não estás a definir o CSS para cada "breakpoint", isto é: nao defines as regras de CSS para cada intervalo de resoluções

    Código:
    // Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) {
    
    }
    
    // Medium devices (tablets, 768px and up)
    @media (min-width: 768px) {
    
    }
    
    // Large devices (desktops, 992px and up)
    @media (min-width: 992px) {
    
    }
    
    // Extra large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) {
    
    }
    Eu prefiro usar esta definição de breakpoints:
    Código:
    // Extra small devices (portrait phones, less than 576px)
    @media (max-width: 575.98px) { ... }
    
    // Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) and (max-width: 767.98px) { ... }
    
    // Medium devices (tablets, 768px and up)
    @media (min-width: 768px) and (max-width: 991.98px) { ... }
    
    // Large devices (desktops, 992px and up)
    @media (min-width: 992px) and (max-width: 1199.98px) { ... }
    
    // Extra large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { ... }
    Portanto, além do teu CSS, no final do documento poe o código em cima.
    A boa prática diz que dimensões ou tamanhos rígidos (em px) devem estar nestes breakpoints. O que é comum (cores, borders, etc), devem aparecer antes, porque é o irá ter muito menor tendência de alterar.

    Vejo aqui um problema:
    Código:
    .section_menu__item__img>img {
        position: absolute;
        top: 0;
        left: 0;
        width: auto;
        max-width: 1000px!important;
        height: 100%!important;
        max-height: 100%;
    }
    "
    Position absolute" com atributos definidos como "important" é má prática, para não falar que "Position absolute" é de evitar a todo o custo.

    Uma sugestão:
    Usa o chrome debug tools com view "Responsive" para encurtares horizontalmente a view, e com isso poderes ver o que começa a "ficar de fora do écrã". Clicas nesse elemento, e verificas no CSS o motivo de não estar a ser "responsive".
    Tens aqui um bom artigo que te explica ao detalhe como tirar proveito deste recurso.

    Abraço e boa sorte.
     
  5. Obrigado pela resposta! Já percebi! Os media queries permitem definir a responsividade nos mais variados tamanhos.

    Neste caso, qual o procedimento a tomar, é que só dois elementos é que são afetados e não um todo. https://prnt.sc/t8jac9
     
  6. Pessoal, deem lá o vosso parecer!!!!
     
  7. serj_tankian

    serj_tankian Power Member

  8. serj_tankian

    serj_tankian Power Member

    sim vi, tu consegues controlar com as classes que das.
    [​IMG]
    tens aí as classes que usas no bootraap para o grid.
    Basicamente bootstrap divide-te o layout em 12 colunas, e tens de construir com base nisso.
    Podes dizer que uma div acima de 768px de ecrã ocupe 50% de largura, e quando é vista em ecrãs menores ocupe 100% de largura
    por ex: <div class="col-md-6 col-sm-12">
    12 equivale a 100% da largura do ecrã, 6 a 50%, 3 a 25% e por aí fora

    olha aqui este exemplo na documentação.
    grid
    [​IMG]
    ve no teu browser e redimensiona a janela para veres o comportamento das colunas conforme a largura do ecrã

    D
    esculpa explicar assim a correr, mas se leres a documentação e o exemplo do codepen conseguiras perceber o sistema grid do bootstrap facilmente :)
     
    Última edição: 29 de Junho de 2020 às 19:01
  9. @serj_tankian

    HTML:
    <section class="mt-5" id="menu">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <h2 class="text-center" id="menu_images">Menu</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <nav class="section_menu__nav">
                            <ul>
                                <li class="active">
                                    <a href="#menu_images" data-filter="1">Almoço & Jantar</a>
                                </li>
                                <li>
                                    <a href="#menu_images" data-filter="2">Bebidas</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <div class="row filter-container">
                    <div class="col-md-6 filtr-item" data-category="1" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/5.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Picanha Grelhada</h4>
                                    <p>Acompanhamento: Arroz, Batatas Fritas</p>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">15,00€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="2" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/11.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Vinho Verde Gazela</h4>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">5,00€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="1" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/6.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Filetes de Pescada </h4>
                                    <p>Acompanhamento: Arroz, Salada, Limão, Salsa</p>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">9,50€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="2" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/12.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Vinho Tinto Qtª da Espiga</h4>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">95,00€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="1" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/7.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Entrecosto Grelhado</h4>
                                    <p>Acompanhamento: Batatas Assadas, Arroz, Limão, Cebola</p>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">12,50€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="2" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/13.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Vinho Tinto Barca Velha</h4>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">650,00€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="1" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/8.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Sardinhas Grelhadas</h4>
                                    <p>Acompanhamento: Batatas Cozidas, Limão, Molho à Escabeche</p>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">13,50€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="2" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/14.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Vinho Tinto Mouchão</h4>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">175,00€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="1" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/9.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Salmão Assado</h4>
                                    <p>Acompanhamento: Molho de Cogumelos</p>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">7,50€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="2" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/16.png" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Quinta dos Carvalhais Tinto</h4>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">8.50€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="1" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/10.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Bifinhos de Frango</h4>
                                    <p>Acompanhamento: Puré de Batata Doce</p>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">10,00€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 filtr-item" data-category="2" data-sort="value">
                        <div class="section_menu__item">
                            <div class="row">
                                <div class="col-3">
                                    <div class="section_menu__item__img">
                                        <img src="assets/img/15.jpg" alt="...">
                                    </div>
                                </div>
                                <div class="col-7">
                                    <h4>Rótulo Touriga Nacional</h4>
                                </div>
                                <div class="col-2">
                                    <div class="section_menu__item__price text-center">6.50€</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    Ou seja eu tenho que alterar o col-3 col-7 col-2, para obter a responsividade correta ?
     
    Última edição: 29 de Junho de 2020 às 20:50
  10. serj_tankian

    serj_tankian Power Member

    @Programar2020
    sim, essas div com class="col" tens de alterar para a formação que queres, conforme os exemplos acima.
     
  11. @serj_tankian

    Tentei, mas não consegui!
     
  12. serj_tankian

    serj_tankian Power Member

  13. Posso estar a ser um bocado tendencioso, porque é o que costumo usar para resolver esse tipo de problemas onde os elementos de uma tabela se reorganizam quando a resolucao muda, mas da uma olhadela no flexbox. Acho mais facil usar que o grid layout e parece que se adapta melhor ao teu problema.
    Como ja alguem disse aqui, evita usar position: absolute e usa !important so em ultimo caso mesmo.