Responsividade

miguel_macedo · June 26, 2020 at 04:06 PM

Boa Tarde

Como é que eu coloco o código responsivo ?

	<section class="mt-5" id="menu">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h2 class="text-center">Menu</h2>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <nav class="section_menu__nav">
                        <ul>
                            <li class="active">
                                <a href="javascript:void(0)" data-filter="1">Almoço & Jantar</a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" 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>

.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;
}

Na transição desta imagem: https://prnt.sc/t71lva e esta https://prnt.sc/t71lyv . o site fica sem responsabilidade!

M6 · June 29, 2020 at 08:42 AM

Bom, antes de mais, duvido que o site alguma vez tenha "responsabilidade", pelo que nunca a deve ter perdido! 😄

O código responsivo é colocado nos elementos que têm de responder aos tamanhos dos ecrãs. Um caso típico é o menu, que muitas vezes passa de uma barra no topo em ecrãs grandes para um popup em ecrãs pequenos.

É o trabalho do web designer definir os elementos e a sua forma de reação.

No teu código, não vejo nenhum elemento que reaja de forma diferente de acordo com o tamanho do ecrã do dispositivo.
Talvez não seja má ideia fazeres um pequeno tutorial para perceberes a questão: https://www.hostinger.com.br/tutoriais/criar-site-responsivo-css

miguel_macedo · June 29, 2020 at 11:44 AM

https://prnt.sc/t8fs6e

https://prnt.sc/t8fs8b

https://prnt.sc/t8fsce

https://prnt.sc/t8fsda

Pela segunda e quarta imagem, vez que perde responsividade, no entanto não acontece com as outras fotos, porquê ? Terei que fazer alguma alteração no código para corrigir esse erro, mas já tentei e não consegui!

Edited June 29, 2020 at 11:46 AM by miguel_macedo

Mr Rick · June 29, 2020 at 01:03 PM

Partilha um print com o conteudo do inspect

miguel_macedo · June 29, 2020 at 02:42 PM

6 horas atrás, Mr Rick disse:

Partilha um print com o conteudo do inspect

@Mr Rick

Não percebi, o inspect não diz nada!

https://prnt.sc/t8jhuk

Edited June 29, 2020 at 07:51 PM by miguel_macedo

Rui Carlos · June 29, 2020 at 05:42 PM

Em geral, parece-me que não estás a controlar minimamente o tamanho dos componentes. Na verdade, fico admirado que consigas esses screenshots com o CSS que mostraste (de certeza que colocaste aqui todo o código CSS?). Mas se partilhares uma página com o código live, será provavelmente mais fácil alguém conseguir ajudar-te.

Adicionalmente, o design do site parece estar mesmo a pedir a utilização de um layout flexbox.

miguel_macedo · June 29, 2020 at 06:36 PM

53 minutos atrás, Rui Carlos disse:

Em geral, parece-me que não estás a controlar minimamente o tamanho dos componentes. Na verdade, fico admirado que consigas esses screenshots com o CSS que mostraste (de certeza que colocaste aqui todo o código CSS?). Mas se partilhares uma página com o código live, será provavelmente mais fácil alguém conseguir ajudar-te.

Adicionalmente, o design do site parece estar mesmo a pedir a utilização de um layout flexbox.

@Rui Carlos enviei-lhe uma mensagem privada, aguardo resposta! Abraço

Mr Rick · June 30, 2020 at 09:08 AM

@miguel_macedo eu queria ver o css aplicado naqueles sítios. O inspect não diz nada? O inspect diz tudo :D é lá que se programa e testa

A melhor forma é hostares o site num S3 ou algo semelhante para poderes partilhar.

miguel_macedo · June 30, 2020 at 07:39 PM

@M6 Consegues ajudar a resolver este problema ? Já tentei através do bootstrap, mas não consegui

Edited June 30, 2020 at 07:39 PM by miguel_macedo

M6 · July 2, 2020 at 07:44 AM

On 6/30/2020 at 8:39 PM, miguel_macedo said:

@M6 Consegues ajudar a resolver este problema ? Já tentei através do bootstrap, mas não consegui

Como disse acima, não estás a controlar o tamanho da página, o que faz com que posiciones incorretamente os elementos em determinados tamanhos de ecrã.

Sign In

Responsividade

Recommended Posts

miguel_macedo

Link to comment

Share on other sites

M6

Link to comment

Share on other sites

miguel_macedo

Link to comment

Share on other sites

Mr Rick

Link to comment

Share on other sites

miguel_macedo

Link to comment

Share on other sites

Rui Carlos

Link to comment

Share on other sites

miguel_macedo

Link to comment

Share on other sites

Mr Rick

Link to comment

Share on other sites

miguel_macedo

Link to comment

Share on other sites

M6

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information