Typical Devices breakpoints ( 27/05/2024 ) Mobile devices - 320px - 480px. iPads, Tablets - 481px - 768px. Small screens, laptops - 769px - 1024px. Desktops, large screens - 1025px - 1200px. Extra large screens, TV - 1201px, and more.
Dei o primeiro passo e comecei a estudar Desenvolvimento web com o curso em vídeo em 2023, estou começando pelo HTML/CSS depois vou partir para programação, sempre fui interessado pelo mundo da informática, quero agradecer o professor guanabara pela oportunidade de poder estudar de forma gratuita... VIDA LONGA AO GUANABARA , 2023...
@@otaviotrevisan1516 Cara, ainda estudando, terminei o curso de HTML e CSS do Guanabara já faz algum tempo, aprendi muito, realmente foi bem compensatório. Não parei por aí, fiz o de JavaScript, mas percebi que precisava de mais, hj em dia faço os cursos da Origamid, estou no JS. Já consigo criar layouts de boas hoje em dia, com HTML/CSS/JS, mas ainda falta muito, preciso pegar frameworks, Api's entre outros, mas já tenho bastante noção, o curso do Guanabara foi bem didático e me ensinou bastante...
Para o projeto ficar ainda mais bonito, pode usar a tag e deixá-la em branco no html. No CSS dos @media, use h2::before { content: "Versão Smartphone"; } onde em cada nova resolução de tela você altera o conteúdo do content. Assim cada resolução que abrir, aparecerá o nome da versão de tela.
Você percebe que está aprendendo quando vão surgindo algumas pequenas coisas para serem ajustadas e você faz sozinhx, sem precisar da ajuda do professor. Obrigada, mestre.
Essa aula ta uma brincadeira mano, MUITO BOM, adoro essas aula que me deixam empolgado para cada vez querer aprender mais, meus olhos ficaram brilhantes olhando esse video, quase chorando, so não me levanto da cadeira agora e começo a bater palmas dunada porque vou acordar meu irmão, amanha a primeira coisa que vou fazer ao acordar vou sair batendo palmas pela casa
na media query de impressao, substitui o background-image por uma no doc. html, estilizei no doc. css principal usando width e height de 100%, position: absolute,z-index: -1, margin-top de -20px e display: none, depois coloquei display: block na @media print{}, deu certo 😃
pra quem fez igual o professor e o tablet nao mudou se atente ao codigo minimo 768 e max 992, a imagem vai aparecer nessa margem se vc crescer demais a tela ele volta ao padrão que seria a do celular
Typical Device Breackpoints: (em 26/12/2023) /* Typical Device Breakpoints: Telas Pequenas: de 320px até 480px Celular: de 481px até 768px Tablet: de 769px até 1024px Desktop: 1025px até 1200px Telas Grandes: acima de 1201px */
Cara, tô com um problema, minhas imagens não carregam nem pra tablets e nem para desktops e tvs. Já mudei algumas configurações do mobile first e nada deu certo, o teu deu certo de primeira ?
Professor, só gratidão, ví esse mesmo assunto em outro curso e fiquei com muitas dúvidas, mas esse método que você ensinou me deu toda segurança. PARABÉNS!!! #boraláMódulo5
Comigo aconteceu o mesmo e depois de ridícula 1 HORA tentando entender, procurando em forum e tudo mais, eu descobri que eu ESCREVI TUDO NO LUGAR ERRADO. Na hora de criar os arquivos de css acabou criando primeiro o media query e depois o style.css, então tudo que era pra fazer no style eu fiz no media e tudo que era no media (o conteúdo deste vídeo) eu fiz no style e por isso não aparecia a mudança de telas, ESTOU RINDO IGUAL UM LOUCO KKKKKKKKKKKKKKKKKKKKK
No meu só funcionou a mudança nas fotos de background se colocar todo o CSS em uma só folha de estilos (Só que o Editor que uso é o Atom)... No mais, estou adorando o curso, parabéns pelo excelente conteúdo!!!
W3C ATUALIZADO 2023. Extra small devices (phones, 600px and down) @media only screen and (max-width: 600px) {...} Small devices (portrait tablets and large phones, 600px and up) @media only screen and (min-width: 600px) {...} Medium devices (landscape tablets, 768px and up) @media only screen and (min-width: 768px) {...} Large devices (laptops/desktops, 992px and up) @media only screen and (min-width: 992px) {...} Extra large devices (large laptops and desktops, 1200px and up) @media only screen and (min-width: 1200px) {...} */
Os pdfs daqui do curso em vídeo normalmente só são disponibilizados depois que todas as aulas de um módulo são publicadas. Pelo menos foi assim até o momento
Minha cabeça deu um bug com esse mobile first, mas, pelo o que eu entendi, basicamente o de 600px para baixo já foi definido pelo mobile first, tipo ele não pode pegar acima do de 600px porque já foi definido ou seja ele só pode para baixo.
no meu não ta funcionando desde a versão para tablet já testei sem usar o live server e com dois navegadores (Opera e Edge) nenhum deles reconheceu a funçáo e, aparentemente, ta tudo ok com meu código :")
Ok, eu refiz meu código e conitnuou não funcionando. Fazendo uns testes, descobri que o problema era na configuração do background-image da mobile first que por algum motivo tava sobrepondo tudo. refazendo ela sem os shorthands resolveu meu problema
@@karine6804 no meu caso, ao inves de usar um "background: (config), (config), (config)" usei background-color: * background-image: * background-position: * e por ai vai
Essa shorthand para background-image dá problemas para diversas pessoas...já vi em comentários de diversos vídeos. Estou preferindo não usar shorthands devido a isso.
Na hora de imprimir a minha versao ficou com 2 folhas, uma inteira em branco. Alem disso, o meu main::after ficou em cima da borda do main :/ nao consegui notar diferencas no meu codigo e no do professor
Não sei, pois sou super aspirante, mas acho que os comandos de @media screen and (min-width: 000px) and (max-width: 000px) estão bugando. Já que estamos fazendo para todo range de telas, não seria suficiente usar só o ... (min-width: 000px) ?
Vim aqui no youtube para tirar essa duvida. Realmente no meu tambem nao esta funcionando. Alguma coisa esta bugando que so funciona a versçao mobile first
Guanabara, porque não está usando o live server? é bom dmss, o meu parou de funcionar, ai estou utilizando outro, o five server, aliás Mt obrigado por esses conteúdos!🙏👏, com certeza eu comprarei todos os certificados.
Guanabara... Bom dia Se eu tiver um site muito cheio de detalhes ou formulários onde em função dos limites de áreas as disposições dos conteúdos são muito diferentes os arquivos não ficarão muito grandes e lentos no momento da carga do site... Me tira essa duvida. O navegador vai carregar todas as midias primeiro pra depois exibir a correta ou ele carregaria apenas a midia atual do site.... PS: sei que talvez isso seja algo muito avançado para o estagio atual do curso mas se possivel comente sobre as sequencia de carga de um site pelo navegador
Nesses img que ele colocou o display: none; e depois colocou para block dependendo do tamanho da tela, essas imagens vão ser todas carregadas, deixando o site lento, uma forma é usar a tag picture
/* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) {...} /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) {...} /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) {...} /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) {...} /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) {...}
Cara o meu também não tava dando certo a impressão, olhei o código um tempão e não achei nada, vim aqui procurar nos comentários e achei o seu, problema resolvido, valeu kkkkkkk
Não consigo entender na configuração de Pc (min-width:992px) and (max-width:1200px) aparece as imagens do mobile com as imagens do Cel e fundo já revi o códigos está igualzinho ao dele mas teima em voltar as configurações de 600 Px e quando passo pra 1.200 vai certo de novo em tv mais alguém deu esse problema? Até fui mudando lá em 992 tanto pra baixo quanto pra cima e vendo as mudanças pelo live sever e nada das configurações do desktop aparecer e imagem é do próprio tanto o fundo quanto o icone
Comigo aconteceu o mesmo e depois de ridícula 1 HORA tentando entender, procurando em forum e tudo mais, eu descobri que eu ESCREVI TUDO NO LUGAR ERRADO. Na hora de criar os arquivos de css acabou criando primeiro o media query e depois o style.css, então tudo que era pra fazer no style eu fiz no media e tudo que era no media (o conteúdo deste vídeo) eu fiz no style e por isso não aparecia a mudança de telas, ESTOU RINDO IGUAL UM LOUCO KKKKKKKKKKKKKKKKKKKKK
da uma olhada se nao tem nada escrito errado o meu nao tava indo porque coloquei AMD em vez de AND kkkkk e esqueci o PX .... para nao errar as pastas eu coloco ../ e ai depois dou o ctrl + espaço para aparecer as opções
Typical Devices breakpoints ( 27/05/2024 )
Mobile devices - 320px - 480px.
iPads, Tablets - 481px - 768px.
Small screens, laptops - 769px - 1024px.
Desktops, large screens - 1025px - 1200px.
Extra large screens, TV - 1201px, and more.
mandou muito irmão
Valeu mano tu é fera
fala meu amigo. Pesquisei aqui agora nessa data, e me parece estar igual ao video. Qual a fonte dessas infos?
Você é um monstro! Uma máquina
Conteúdo maravilhoso!
Dá um like quem gostaria de ver um curso de React pelo curso em vídeo.
Seja um apoiador
Dei o primeiro passo e comecei a estudar Desenvolvimento web com o curso em vídeo em 2023, estou começando pelo HTML/CSS depois vou partir para programação, sempre fui interessado pelo mundo da informática, quero agradecer o professor guanabara pela oportunidade de poder estudar de forma gratuita... VIDA LONGA AO GUANABARA , 2023...
como tá hoje em dia?
@@otaviotrevisan1516 Cara, ainda estudando, terminei o curso de HTML e CSS do Guanabara já faz algum tempo, aprendi muito, realmente foi bem compensatório. Não parei por aí, fiz o de JavaScript, mas percebi que precisava de mais, hj em dia faço os cursos da Origamid, estou no JS. Já consigo criar layouts de boas hoje em dia, com HTML/CSS/JS, mas ainda falta muito, preciso pegar frameworks, Api's entre outros, mas já tenho bastante noção, o curso do Guanabara foi bem didático e me ensinou bastante...
Para o projeto ficar ainda mais bonito, pode usar a tag e deixá-la em branco no html. No CSS dos @media, use
h2::before {
content: "Versão Smartphone";
}
onde em cada nova resolução de tela você altera o conteúdo do content. Assim cada resolução que abrir, aparecerá o nome da versão de tela.
Você percebe que está aprendendo quando vão surgindo algumas pequenas coisas para serem ajustadas e você faz sozinhx, sem precisar da ajuda do professor. Obrigada, mestre.
Estou estudando HTML e CSS em outras fontes além do curso em vídeo, e sem duvida aqui é o melhor lugar para ter uma base e fixar o conteúdo.
Essa aula ta uma brincadeira mano, MUITO BOM, adoro essas aula que me deixam empolgado para cada vez querer aprender mais, meus olhos ficaram brilhantes olhando esse video, quase chorando, so não me levanto da cadeira agora e começo a bater palmas dunada porque vou acordar meu irmão, amanha a primeira coisa que vou fazer ao acordar vou sair batendo palmas pela casa
kkkkkkkk muito bom
kkkkkkkk muito massa mesmo
na media query de impressao, substitui o background-image por uma no doc. html, estilizei no doc. css principal usando width e height de 100%, position: absolute,z-index: -1, margin-top de -20px e display: none, depois coloquei display: block na @media print{}, deu certo 😃
pra quem fez igual o professor e o tablet nao mudou se atente ao codigo minimo 768 e max 992, a imagem vai aparecer nessa margem se vc crescer demais a tela ele volta ao padrão que seria a do celular
Typical Device Breackpoints:
(em 26/12/2023)
/* Typical Device Breakpoints:
Telas Pequenas: de 320px até 480px
Celular: de 481px até 768px
Tablet: de 769px até 1024px
Desktop: 1025px até 1200px
Telas Grandes: acima de 1201px
*/
Cara, tô com um problema, minhas imagens não carregam nem pra tablets e nem para desktops e tvs. Já mudei algumas configurações do mobile first e nada deu certo, o teu deu certo de primeira ?
@@juniorsoares5271 não é algo escrito errado no media querie?
Professor, só gratidão, ví esse mesmo assunto em outro curso e fiquei com muitas dúvidas, mas esse método que você ensinou me deu toda segurança. PARABÉNS!!! #boraláMódulo5
Obrigado, Gustavo!
Sensacional, estou fazendo o curso desde o módulo 01, essa aula foi muito top!!!
Aula maravilhosa demais.. não tem professor igual a esse!
Uma dica: Nos @media coloque só background-image, assim vc n coloca um shorthand q sobrepoe o style geral (mobile) e não gera linhas desnecessárias.
Valeu
Estou estudando frontend, tecnologia é fantástica, adoro !! 👏👏😍
Muito bom professor valeu mais uma vez
Muito boa aula. Didática. Torna simples o entendimento.
PS. caneca curiosa (10:09).
show!
MUITO SHOW ESSA AULA
Que aula maravilhosa! Obrigada Guanabara!!!
Que aula interessante!! É um ótimo diferencial ter acesso a este conteúdo e aplicar isso em meus projetos. Avante Devs!!
Otimo curso, no aguardo das proximas aulas... obrigado!
Que aula top, gostei demais!!!!!!!!!!!
o meu não estava funcionando no Chrome por causa do zoom, estava em 50%, coloquei em 100% e funcionou corretamente
Perguntei ao Chat GTP quais eram os breakpoints atualmente e ele falou exatamente a mesma coisa do professor
O chat tem limitação de informações até 2021 (A não ser que uma atualização recente tenha alterado isso)
top mestre
Show, Top, brabo!
Comigo aconteceu o mesmo e depois de ridícula 1 HORA tentando entender, procurando em forum e tudo mais, eu descobri que eu ESCREVI TUDO NO LUGAR ERRADO. Na hora de criar os arquivos de css acabou criando primeiro o media query e depois o style.css, então tudo que era pra fazer no style eu fiz no media e tudo que era no media (o conteúdo deste vídeo) eu fiz no style e por isso não aparecia a mudança de telas, ESTOU RINDO IGUAL UM LOUCO KKKKKKKKKKKKKKKKKKKKK
EU imagino que o futuro do trabalho seja isso mesmo KKKKKKKKK BEIRANDO A INSANIDADE
Não podemos negar que quando algo assim acontece aprendemos muito a prestar mais atenção, hehehe. Já tive vários episódios assim.
No meu só funcionou a mudança nas fotos de background se colocar todo o CSS em uma só folha de estilos (Só que o Editor que uso é o Atom)... No mais, estou adorando o curso, parabéns pelo excelente conteúdo!!!
Nice!
eu perdi algum tempo pra descobrir que o que estava me atrapalhando era a falta de espaço entre o /*and*/ e o /*(min-width:####px) */
W3C ATUALIZADO 2023.
Extra small devices (phones, 600px and down)
@media only screen and (max-width: 600px) {...}
Small devices (portrait tablets and large phones, 600px and up)
@media only screen and (min-width: 600px) {...}
Medium devices (landscape tablets, 768px and up)
@media only screen and (min-width: 768px) {...}
Large devices (laptops/desktops, 992px and up)
@media only screen and (min-width: 992px) {...}
Extra large devices (large laptops and desktops, 1200px and up)
@media only screen and (min-width: 1200px) {...} */
Muito bom nota 10 mas é muita coisa as vezes quase fico doido kk
Show
Não tô conseguindo achar os PDF's das aulas do módulo 4 (Cap 21 em diante)!!!
Os pdfs daqui do curso em vídeo normalmente só são disponibilizados depois que todas as aulas de um módulo são publicadas. Pelo menos foi assim até o momento
Top
Lobisomens no porão do Guanabara: *UIVAM ALTO*
Guanabara: Ai ai essa furadeira...
Minha cabeça deu um bug com esse mobile first, mas, pelo o que eu entendi, basicamente o de 600px para baixo já foi definido pelo mobile first, tipo ele não pode pegar acima do de 600px porque já foi definido ou seja ele só pode para baixo.
no meu não ta funcionando desde a versão para tablet
já testei sem usar o live server e com dois navegadores (Opera e Edge)
nenhum deles reconheceu a funçáo e, aparentemente, ta tudo ok com meu código :")
Ok, eu refiz meu código e conitnuou não funcionando.
Fazendo uns testes, descobri que o problema era na configuração do background-image da mobile first que por algum motivo tava sobrepondo tudo.
refazendo ela sem os shorthands resolveu meu problema
@@giodosvani Oi, como ficou o código? Estou com o mesmo problemas.
@@karine6804 no meu caso, ao inves de usar um "background: (config), (config), (config)"
usei
background-color: *
background-image: *
background-position: *
e por ai vai
Uma dica: Nos @media coloque só background-image, assim vc n coloca um shorthand q sobrepoe o style geral (mobile) e não gera linhas desnecessárias.
Essa shorthand para background-image dá problemas para diversas pessoas...já vi em comentários de diversos vídeos.
Estou preferindo não usar shorthands devido a isso.
E essa caneca no fundo do pc? kkk. Show a aula!!
Na hora de imprimir a minha versao ficou com 2 folhas, uma inteira em branco. Alem disso, o meu main::after ficou em cima da borda do main :/ nao consegui notar diferencas no meu codigo e no do professor
Não sei, pois sou super aspirante, mas acho que os comandos de @media screen and (min-width: 000px) and (max-width: 000px) estão bugando. Já que estamos fazendo para todo range de telas, não seria suficiente usar só o ... (min-width: 000px) ?
Vim aqui no youtube para tirar essa duvida. Realmente no meu tambem nao esta funcionando. Alguma coisa esta bugando que so funciona a versçao mobile first
@@gilsonoliveira1510 conseguiu resolver? o meu tb ta funcionando só a versão mobile first
Guanabara, porque não está usando o live server? é bom dmss, o meu parou de funcionar, ai estou utilizando outro, o five server, aliás Mt obrigado por esses conteúdos!🙏👏, com certeza eu comprarei todos os certificados.
ele usa no curso de javascript, mas aqui não
e tem como aplicar um hover na mudanca dos icones?
a furadeira de fundo manooooo kkkkkkkkkkkkkkkkkkkk
Kssk
Parecia um cachorro uivando akakakaka
pra mim nao funcionou, estico a tela e as versões tablet e tv nao aparecem, so fica mostrando a versão mobile
para mim também, talvez alguma configuração do mobile first esteja atrapalhando.
Conseguiram resolver? Estou tendo o mesmo problema
isso e so olha se nao boto alguma letra errada nessa parte.
Guanabara... Bom dia
Se eu tiver um site muito cheio de detalhes ou formulários onde em função dos limites de áreas as disposições dos conteúdos são muito diferentes os arquivos não ficarão muito grandes e lentos no momento da carga do site...
Me tira essa duvida. O navegador vai carregar todas as midias primeiro pra depois exibir a correta ou ele carregaria apenas a midia atual do site....
PS: sei que talvez isso seja algo muito avançado para o estagio atual do curso mas se possivel comente sobre as sequencia de carga de um site pelo navegador
Nesses img que ele colocou o display: none; e depois colocou para block dependendo do tamanho da tela, essas imagens vão ser todas carregadas, deixando o site lento, uma forma é usar a tag picture
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
O meu funcionou todos menos da impressora 🤷♂.
Vim so avisar que eu esqueci o ; no final do @CHARSET kkkkk
Cara o meu também não tava dando certo a impressão, olhei o código um tempão e não achei nada, vim aqui procurar nos comentários e achei o seu, problema resolvido, valeu kkkkkkk
Obrigada pelo comentário, fiz a mesma coisa e não estava achando o erro! :D
Não consigo entender na configuração de Pc (min-width:992px) and (max-width:1200px) aparece as imagens do mobile com as imagens do Cel e fundo já revi o códigos está igualzinho ao dele mas teima em voltar as configurações de 600 Px e quando passo pra 1.200 vai certo de novo em tv mais alguém deu esse problema? Até fui mudando lá em 992 tanto pra baixo quanto pra cima e vendo as mudanças pelo live sever e nada das configurações do desktop aparecer e imagem é do próprio tanto o fundo quanto o icone
o meu está igual, mesmo com os pixels certos ele nao muda pra img de pc ou tv, no meu caso mantém no tablet e o celular
o meu código ficou assim e deu tudo certo, corrige ai pra ver:
@media print { /* IMPRESSÃO */
}
@media screen and (min-width: 768px) and (max-width: 992px) { /* TABLET */
body {
background-image: url(../imagens/back-tablet.jpg);
}
img#phone {display: none;}
img#tablet {display: block;}
img#print {display: none;}
img#pc {display: none;}
img#tv {display: none;}
}
@media screen and (min-width: 992px) and (max-width: 1200px) { /* DESKTOP */
body {
background-image: url(../imagens/back-pc.jpg);
}
img#phone {display: none;}
img#tablet {display: none;}
img#print {display: none;}
img#pc {display: block;}
img#tv {display: none;}
}
@media screen and (min-width: 1200px) { /* GRANDES TELAS */
body {
background-image: url(../imagens/back-tv.jpg);
}
img#phone {display: none;}
img#tablet {display: none;}
img#print {display: none;}
img#pc {display: none;}
img#tv {display: block;}
}
Comigo aconteceu o mesmo e depois de ridícula 1 HORA tentando entender, procurando em forum e tudo mais, eu descobri que eu ESCREVI TUDO NO LUGAR ERRADO. Na hora de criar os arquivos de css acabou criando primeiro o media query e depois o style.css, então tudo que era pra fazer no style eu fiz no media e tudo que era no media (o conteúdo deste vídeo) eu fiz no style e por isso não aparecia a mudança de telas, ESTOU RINDO IGUAL UM LOUCO KKKKKKKKKKKKKKKKKKKKK
@@uosp3. porra irmão, era exatamente isso, e eu boiando, pqpppppppppppppppp. no meu caso era o "px" q eu n coloquei
@@heltonpereira6469 Como ficou com a parte da impressao ? o meu é o unico que nao vai.
Já procurei no site oficial do curso em video não encontro o modulo 5 HTML5 e CSS3 para quando estará disponível?
quando esse acabar ele vai lançar o 5 dps de um tempinho
Na minha época igual 01/08/2023
Site tá me dando acesso proibido e não tô conseguindo seguir cm os cursos, alguém cm o msm problema ?
Eu não consegui trabalhar com duas pastas de estilos, só funcionou fazendo em uma pasta somente. Alguém tem uma dica?
da uma olhada se nao tem nada escrito errado o meu nao tava indo porque coloquei AMD em vez de AND kkkkk e esqueci o PX .... para nao errar as pastas eu coloco ../ e ai depois dou o ctrl + espaço para aparecer as opções
@@lucasvilasboas7326 Vou verificar imediatamente, obrigado amigo!
@@famigeradolucrixkk1570 se puder ajudar em algo to aqui ! ;)
Meu não funcionou nada
Está escrito tudo corretamente , tem os espaços no lugar certo, só fica travado na imagem do celular
a caneca do background do pc kkkkkkkkkk
kkkkkkkkkkk achei que ngm tinha reparado
Eu nem tinha reparado kk
Eu não tinha reparado kkkkkkkkkkkkkkkkkk Meu Deus kakakaakakakakak
e eu que sou curiosa e fui olhar llkkkkk
Meu código na parte da impressora da erro e não consigo resolver, se alguém souber me ajudar, agradeço!
@charset "UTF-8";
/* todas as demais midias */
----------------------------
/*
Pequenas telas: até 600px
Celular: de 600px até 768px
Tablet: 768 até 992px
Desktop: 992px até 1200px
Grandes telas; acima de 1200px
*/
@media print { /* impressão */
body {
background-image: url(../imagens/back-print.jpg);
}
img#phone {display: none;}
img#tablet {display: none;}
img#print {display: block;}
img#pc {display: none;}
img#tv {display: none;}
}
@media screen and (min-width: 768px) and (max-width: 992px) { /* TABLET */
body {
background-image: url(../imagens/back-tablet.jpg);
}
img#phone {display: none;}
img#tablet {display: block;}
img#print {display: none;}
img#pc {display: none;}
img#tv {display: none;}
}
@media screen and (min-width: 992px) and (max-width: 1200px) { /* DESKTOP */
body {
background-image: url(../imagens/back-pc.jpg);
}
img#phone {display: none;}
img#tablet {display: none;}
img#print {display: none;}
img#pc {display: block;}
img#tv {display: none;}
}
@media screen and (min-width: 1200px) { /* GRANDES TELAS */
body {
background-image: url(../imagens/back-tv.jpg);
}
main {
width: 700px;
}
img#phone {display: none;}
img#tablet {display: none;}
img#print {display: none;}
img#pc {display: none;}
img#tv {display: block;}
}
Os tracinhos que vc colocou em baixo de "todas as mídias" não estão comentados é só meter no comentário que resolve o erro
@@raimundotavares8839 Bom olhar, hein
@@renatoorosco eu fiquei uns 10 minutos tentando perceber kkkk
@@raimundotavares8839 Pensei que tinha sido no ato, kkk. Pois quando li o que voce escreveu, foi bem fácil de ver o erro kkk
Obrigado por ter deixado o codigo, eu sei que copiar nao ajuda mas irei refazer o exercicio me baseando no seu codigo
Meu @media não reconhece o (max-widht) nem o (min-widht), alguém sabe me ajudar?
é width
@@fabiomorais5495 kkkkkkkkkkkk parece mentira, mas perdi um tempão para perceber kkkkkkkkkkk
Pode ser a falta de um espaço entre o AND e o parêntese.
@@gilmarfarias8481 exatamente, era esse o problema kkkkkkkkkkkkk
Conseguiu resolver o problema, o meu min-widht: não fica azul , e as configurações não funcionam
vsfd to começando a gostar de html vmtnc
15:35, só não repetir tanto código desnecessário. Todos esses " display: none" aí podem ser trocados por uma única query.
Como assim, mano? Poderia explicar?
@@MaiaSantiago-p9ecoloca só a que está com block. Exemplo: img#tv{ display: block; }