professorguanabara / html-css

Curso de HTML5 e CSS3 do CursoemVideo
MIT License
548 stars 63 forks source link

problemas com responsividade #3

Open nicodemossmelo opened 2 years ago

nicodemossmelo commented 2 years ago

ola ! boa noite eu estou tendo dois problemas na verdade um deles e deixa a imagem resposiva ja tentei varios dias resolve e nao consigo inclusive tentei fazer tambem junto com o professor e mesmo o codigo aparentemente igual no meu não funcionou. o segundo problema foi na hora de hospedagem quando o professor coloca na opção master blanch essa opção opção não aparece para mim so deixa escolher o tema ai aparece umas coisas que acredito eu que se eu aceita ira mudar o codigo. voçês conseguem me ajuda nessas duvidas?

DanielRocha01 commented 2 years ago

@nicodemossmelo O problema pode ser resolvido usando um width: 100%; , mas esse é um método bom para imagem grandes , já que quando usado em imagens pequenas elas começam a ficar desfocada ,o width em 100% declara que a imagem dever ocupar todo o tamanho da tela não importando o tamanho do display do smartphone ou desktop. Também podemos usar o max-width: ; ou min-width: ; . OBS : para imagens que vão ficar na frente do plano.

Outro método é se for uma imagem de fundo que para anexa-la usamos o background-image: url("endereço da imagem"); , após isso adicionamos um background-size: cover; ,o cover declara que a imagem deve se adaptar ao tamanho da tela mesmo que tenha que cortar alguma parte para exibi-la .

Espero ter ajudado !!!!!

nicodemossmelo commented 2 years ago

Obrigado deu certo 😍😍

Em qua, 9 de fev de 2022 16:11, Daniel Rocha @.***> escreveu:

@nicodemossmelo https://github.com/nicodemossmelo O problema pode ser resolvido usando um width: 100%; , mas esse é um método bom para imagem grandes , já que quando usado em imagens pequenas elas começam a ficar desfocada ,o width em 100% declara que a imagem dever ocupar todo o tamanho da tela não importando o tamanho do display do smartphone ou desktop. OBS : para imagens que vão ficar na frente do plano.

Outro método é se for uma imagem de fundo que para anexa-la usamos o background-image: url("endereço da imagem"); , após isso adicionamos um background-size: cover; ,o cover declara que a imagem deve se adaptar ao tamanho da tela mesmo que tenha que cortar alguma parte para exibi-la .

Espero ter ajudado !!!!!

— Reply to this email directly, view it on GitHub https://github.com/professorguanabara/html-css/issues/3#issuecomment-1034103136, or unsubscribe https://github.com/notifications/unsubscribe-auth/AWL45CT4BXTW4TTW24FHKI3U2K36ZANCNFSM5HZCEUUA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

DanielRocha01 commented 2 years ago

@nicodemossmelo Não sei se você percebeu mas vou deixar uma dica 💡

As tags que usamos para vídeo e imagens na maioria das vezes são classificadas como box-level. Vou demostrar alguns exemplos :

h1 --> já vem com o estilo de display padrão como display: block; Block --> Declara que deverá criar uma nova linha ou bloco(lembrando que a altura e largura é possível modificá-la) . a --> já vem com o estilo de display padrão como display: inline; Inline --> Declara que o item deve permanecer na mesma linha que a tag ou item anterior a ele .

Espero que a dica tenha ajudado ou esclarecido algo para você !!!!

nicodemossmelo commented 2 years ago

Boa tarde!! Então acho que aprendi bastante no curso de HTML e CSS vou começa o de Java script vou deixa o link de um site que criei pra mim da uma olhadinha por favor se tiver um tempinho se tive alguma dica ficarei agradecido. https://nicodemossmelo.github.io/meusiteofficial/

Em qua, 9 de fev de 2022 20:16, Daniel Rocha @.***> escreveu:

@nicodemossmelo https://github.com/nicodemossmelo Não sei se você percebeu mas vou deixar uma dica 💡

As tags que usamos para vídeo e imagens na maioria das vezes são classificadas como box-level. Vou demostrar alguns exemplos : --> já vem com o estilo de display padrão como display: block; Block --> Declara que deverá criar uma nova linha ou bloco(lembrando que a altura e largura é possível modificá-la) . --> já vem com o estilo de display padrão como display: inline; Inline --> Declara que o item deve permanecer na mesma linha que a tag ou item anterior a ele .

Espero que a dica tenha ajudado ou esclarecido algo para você !!!!

— Reply to this email directly, view it on GitHub https://github.com/professorguanabara/html-css/issues/3#issuecomment-1034298397, or unsubscribe https://github.com/notifications/unsubscribe-auth/AWL45CQUDNISXO26NOBPVUTU2LYTDANCNFSM5HZCEUUA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

DanielRocha01 commented 2 years ago

Olá boa noite 🌃

O site está muito bom , então aqui vai algumas correções!!! OBS : por favor leia tudo!!!!!!!!!

Aviso : tudo que está em parênteses é o que deve ser sobrescrito . Só vou colocar as correção de erros específicos e não todo o código de uma tag,name,class ou id .

Identação da tag nav está errada tem que que corrigir.

(Opcional) seria bom se diminui-se o tamanho tanto da imagem pequena como a grande nomeada (negócios) , para a grande deixa com maior largura e menor altura, para a pequena se faz o inverso.

(Opcional) também seria bom se você desse uma maneira de deixar alguns títulos totalmente visível já que o background está sobrepondo o título.

Para estilos CSS :

header { adicionar padding-bottom: ; para melhorar a distância entre as tags header e nav em dispositivos pequenos.

} header > p { text-align: center;(remover o max-width, margin: auto;, margin-bottom) } nav > a { adicionar um font-size: vw; para o menu crescer de acordo com o tamanho da lagura do dispositivo }

OBS : Eu posso estar errado em alguma coisa, por isso faça uma cópia do seu site para não perder nada . Aliás também sou estudante , e quando se está aprendendo nós erramos, e mesmo se sabemos bem algo em algum momento nós também erraremos ,pois errar é humano .

AS OBSERVAÇÕES FORAM FEITAS NO SMARTPHONE MOTOE 6 PLAY ,MAS NÃO APLICADAS OU TESTADAS EM NENHUM ARQUIVO DE CORREÇÃO .

Screenshot_20220210-190102