Jump to content
miguel_macedo

Responsividade

Recommended Posts

miguel_macedo

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! 

Share this post


Link to post
Share on other sites
M6

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

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


10 REM Generation 48K!
20 INPUT "URL:", A$
30 IF A$(1 TO 4) = "HTTP" THEN PRINT "400 Bad Request": GOTO 50
40 PRINT "404 Not Found"
50 PRINT "./M6 @ Portugal a Programar."

 

Share this post


Link to post
Share on other sites
miguel_macedo

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 by miguel_macedo

Share this post


Link to post
Share on other sites
Rui Carlos

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.

Share this post


Link to post
Share on other sites
miguel_macedo
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

Share this post


Link to post
Share on other sites
Mr Rick

@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. 

Share this post


Link to post
Share on other sites
miguel_macedo

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

Edited by miguel_macedo

Share this post


Link to post
Share on other sites
M6
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ã.


10 REM Generation 48K!
20 INPUT "URL:", A$
30 IF A$(1 TO 4) = "HTTP" THEN PRINT "400 Bad Request": GOTO 50
40 PRINT "404 Not Found"
50 PRINT "./M6 @ Portugal a Programar."

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.