Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

[Dúvida] Ultimos ajustes no projeto

Então galera...

Realizei os cursos sobre HTML e CSS, os quais achei muito legal e consegui seguir quase tudo a risca, porém não consegui executar algumas modificações feitas pelos professores nos vídeos e acabou que meu projeto final não ficou da forma como eu gostaria. Acabei me perdendo um pouco e por isso resolvi criar esse tópico para centralizar as minhas duvidas, a fim de resolve-las. Tentei ja mexer em algumas linhas tanto do HTML quanto do arquivo CSS, porem sem sucesso. Então vamos lá, seguem as duvidas:

1- Não consigo ajustar o tamanho da imagem corretamente, e nem movimentar ela mais para o centro ou mais proxima da margem lateral; No video, acredito que a imagem utilizada ja estava num tamanho diferente, e ao subir a foto que eu usei no meu projeto, ela era muito maior, então talvez tenha alguma relação com isso...

2- Precisaria entender se tem alguma forma de separar cada item que eu quero modificar, sem ser a classe toda. Isso é na parte do @media? Por exemplo, se eu quiser movimentar somente uma parte do parágrafo mais acima ou mais abaixo, e deixar a outra parte sem mexer, é possivel?

Não sei se consegui ser claro, porém se conseguirem me ajudar, será muito importante para que o projeto fique 100% e eu consiga entender esses detalhes para os proximos. Desde já agradeço!

5 respostas
solução!

Olá, Henrique.

Tudo bem?

Para alterar a posição da imagem você precisa primeiro olhar para a tag pai dela que é a .apresentacao, nessa classe tem a propriedade display: flex; e a justify-content: space-between; que faz com que a imagem e texto fiquem alinhads e separados longe, para ficarem mais próximos você pode alterar de justify-content: space-around; e se quiser mais próximo ainda, utiliza o justify-content: space-evenly; isso na classe .apresentacao. Outra opção é remover o justify-content, e colocar espaçamentos através do gap: ; ou da margin: ; direto no elemento.

Agora para alterar o tamanho da imagem basta adicionar uma classe CSS para ela no HTML, e alterar o width: ; ai você pode utilizar a unidade de medida porcentagem, ou pixels, ou em etc, o que achar melhor.

Eu testei colocando uma classe chamada apresentacao__imagem e coloquei um width: 40%; ficou parecido com o tamanho utilizado no curso, ai você pode alterar essa porcentagem para mais ou menos.

Espero ter ajudado. Qualquer dúvida manda aqui.

Olá, Henrique.

Tudo bem?

Para alterar a posição da imagem você precisa primeiro olhar para a tag pai dela que é a .apresentacao, nessa classe tem a propriedade display: flex; e a justify-content: space-between; que faz com que a imagem e texto fiquem alinhados e separados longe, para ficarem mais próximos você pode alterar de justify-content: space-between; para justify-content: space-around; e se quiser mais próximo ainda, utiliza o justify-content: space-evenly; isso na classe .apresentacao. Outra opção é remover o justify-content, e colocar espaçamentos através do gap: ; na classe pai .apresentacao, ou a margin: ; direto no elemento.

Agora para alterar o tamanho da imagem basta adicionar uma classe CSS para a imagem no HTML, e alterar o width: ; ai você pode utilizar a unidade de medida porcentagem, pixels, ou em etc, o que achar melhor.

Eu testei colocando uma classe chamada apresentacao__imagem e coloquei um width: 40%; ficou parecido com o tamanho utilizado no curso, ai você pode alterar essa porcentagem para mais ou menos.

Espero ter ajudado. Qualquer dúvida manda aqui.

Olá, Henrique.

Tudo bem?

Para alterar a posição da imagem você precisa primeiro olhar para a tag pai dela que é a .apresentacao, nessa classe tem a propriedade display: flex; e a justify-content: space-between; que faz com que a imagem e texto fiquem alinhados e separados longe, para ficarem mais próximos você pode alterar de justify-content: space-between; para justify-content: space-around; e se quiser mais próximo ainda, utiliza o justify-content: space-evenly; isso na classe .apresentacao. Outra opção é remover o justify-content, e colocar espaçamentos através do gap: ; na classe pai .apresentacao, ou a margin: ; direto no elemento.

Agora para alterar o tamanho da imagem basta adicionar uma classe CSS para a imagem no HTML, e alterar o width: ; ai você pode utilizar a unidade de medida porcentagem, pixels, ou em etc, o que achar melhor.

Eu testei colocando uma classe chamada apresentacao__imagem e coloquei um width: 40%; ficou parecido com o tamanho utilizado no curso, ai você pode alterar essa porcentagem para mais ou menos.

Espero ter ajudado. Qualquer dúvida manda aqui.

Olá, Henrique.

Tudo bem?

Para alterar a posição da imagem você precisa primeiro olhar para a tag pai dela que é a .apresentacao, nessa classe tem a propriedade display: flex; e a justify-content: space-between; que faz com que a imagem e texto fiquem alinhados e separados longe, para ficarem mais próximos você pode alterar de justify-content: space-between; para justify-content: space-around; e se quiser mais próximo ainda, utiliza o justify-content: space-evenly; isso na classe .apresentacao. Outra opção é remover o justify-content, e colocar espaçamentos através do gap: ; na classe pai .apresentacao, ou a margin: ; direto no elemento.

Agora para alterar o tamanho da imagem basta adicionar uma classe CSS para a imagem no HTML, e alterar o width: ; ai você pode utilizar a unidade de medida porcentagem, pixels, ou em etc, o que achar melhor.

Eu testei colocando uma classe chamada apresentacao__imagem e coloquei um width: 40%; ficou parecido com o tamanho utilizado no curso, ai você pode alterar essa porcentagem para mais ou menos.

Espero ter ajudado. Qualquer dúvida manda aqui.

Show!! Muito obrigado pelo retorno amigo! Fiz alguns ajustes aqui e melhorou... porém agora estou com problemas na responsividade da pagina, pois quando abro no celular, a imagem fica deslocada... vou revisar os vídeos e ver se consigo resolver isso tambem!

Muito obrigado mesmo!