@gpolese
Latest solutions
Ip Address Tracker [ HTML - JS - SASS - VITE ]
#accessibility#fetch#sass/scss#viteSubmitted over 1 year agoSingle page design portfolio { React - SCSS - Vite }
#accessibility#animation#react#sass/scss#viteSubmitted over 1 year ago
Latest comments
- @FelipeCastroDEV
Você precisa dar o git init no repositorio do seu projeto para quando vc for da o git push ele subir para o github apenas a pasta com os arquivos do seu projeto, html,css e jss.
Pelo que entendi a raiz do seu repositorio contem uma imagem com a foto do projeto, imagem essa que aparece quando acessa o link de visualização que você disponibilizou. tenta copiar todos os arquivos do seu projeto e colar na pasta raiz do repositorio.
E sobre a responsividade não precisa ficar muito presa nisso de rem ou px, a unica coisa que vai mudar em escolher trabalhar com rem em textos e que o rem é relativo ao tamanho da fonte padrao setada no navegador, dando ao usuario liberdade em aumentar a fonte dos textos utlizando o zoom do navegador.
Para melhorar a resposividade dos elementos você vai ter que dominar conceitos como flex e grid layout e entender o conceito de media queries.
Te aconselho a pesquisar como adicionar media queries, essa feature basicamente aplica um css diferente nos elementos que vc especificar quando a janela no navegador atingir determinado tamanho. quando vc encontrar o melhor tamanho para mudar o layout vai precisar apenas colocar um flex-direction: colum no wrapper dos seus cards.
Espero ter ajudado, e bons aprendizados nessa nova jornada !
- @lichtle@FelipeCastroDEV
Olha eu fiz umas pequenas modificações no seu código para melhorar um pouco a questão da responsividade..
/*Forcamos um height para foto sempre se manter esticada e usamos o object-fit para a foto corta automaticamente, sem object-fit a foto vai ficar desproporcional.. essa propriedade funciona de forma parecida com background-size e background-position. vale a pena da uma estudada vc ira se deparar com alguns problemas que ela soluciona de uma forma bem simples. */ .container-principal picture img{ max-width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Aqui era onde estava um dos principais problemas, vc usou o padding para tentar distribuir o espaco do conteudo.. essa forma não deixa o elemento responsivo*/
section.anuncio { padding: 20px; display: flex; flex-direction: column; justify-content: center; }
img.logo { max-width: 16rem; /* position: absolute; */ top: 5rem; }
p.descricao { font-weight: 400; margin: 4rem 0; line-height: 3rem; max-width: 40ch; /* essa parte delimita o tamanho do p em 40 caracteres zero, para nao deixar ele livre no container */ }
button.send-btn { position: absolute; left: 200px; /* Ajustado Posicao do botao*/ top: 0; /* Ajustado Posicao do botao*/ height: 100%; /* Ajustado Height do botao para ficar da altura do form*/ border: none; background: linear-gradient( 135deg, rgba(248, 191, 191, 1) 0%, rgba(238, 140, 140, 1) 100% ); padding: 1.2rem 4rem; border-radius: 2.5rem; cursor: pointer; }
isso não vai concerta todos os problemas do código em relação a responsividade é apenas vc ter uma ideia do que fazer na sua segunda tentativa, eu ate pensei em resolver todos os problemas e mandar o código para vc mas penso que iria tirar toda a graça rsrs ja que vc vai conseguir fazer isso sozinha :D
vou te passar o link do código da minha solução para esse desafio está bem simples, caso vc tenha alguma duvida no código pode enviar aqui que eu te respondo.
https://github.com/FelipeAmorimDev/base-apparel-coming-soon-page https://felipeamorimdev.github.io/base-apparel-coming-soon-page/
Ah uma dica, Eu vi que vc deixou a logo com posicionamento absoluto para deixar ela em cima da tela quando muda para celular. Para evitar isso vc pode deixar no topo do documento uma logo com display none e ai colocar um media para qnd passar para o mobile esconder a logo desktop e mostrar a logo mobile, já que a logo quando o site esta em desktop faz parte do container do anuncio. e quando passa para mobile a ordem dos elementos sofre uma mudança. essa foi umas das solucoes que encontrei para esse problema, quando vc ver o meu codigo vai ficar mais claro...
qualquer duvida sinta-se a vontade para perguntar
Abracos
- @Cheosphere@FelipeCastroDEV
you are my reference haha how much time did you spend in this project ?
i think to start that project now, and would like to know an estimated time :D
- @lichtle@FelipeCastroDEV
Esqueci de enviar as mudanças nos medias-queries rsrs
@media (max-width: 600px) { main.product-card { grid-template-columns: 1fr; /* 1fr para deixar o container todo em apenas uma coluna*/ }
div.product-img { min-height: 350px; background-position: center left; }
}
- @lichtle@FelipeCastroDEV
para fazer essa divisão 50%/50% ficaria mais simples usar display grid
eu fiz algumas modificações no seu código, vou mandar aqui dai vc testa ai!
body { display: flex; justify-content: center; align-items: center; /* height: 100vh; Removido*/ background-color: var(--background-color); padding: 20px; /Adicionado/ }
.main.product-card { max-width: 600px; /* Colocamos um tamanho maximo no seu container */ display: grid; grid-template-columns: 1fr 1fr; /Principal comando para divisao 50% / 50%/ align-items: center; background-color: var(--card-and-btn-text-color); border-radius: 1rem; }
div.product-img { background: url("../images/product.jpg") no-repeat center; background-size: cover; width: 100%; height: 100%; border-radius: 1rem 0 0 1rem; }
div.product-details { display: flex; flex-direction: column; width: 100%; padding: 3rem; gap: 2rem; }
1fr equivalem a uma fração do espaço disponível na grid, sendo assim 1fr 1fr vai dividir o container em duas partes de 50% iguais, caso queira 1/3 seriam 1fr 1fr 1fr e assim vai.
Espero ter ajudado!!
A proposito gostei da sua solução com flex, parabéns.
Marked as helpful - @dlxzeus777@FelipeCastroDEV
Hello Sinka, nice project !
you can solve this problem using JavaScript to close the previous question when another new be opened
e.g : https://statuesque-begonia-fff65f.netlify.app/
if you dont know how to do this check my solution in: https://github.com/FelipeAmorimDev/FAQ-accordion-card/blob/main/script/script.js
if you have any doubt about how do you do to apply that script, you can ask me my friend!
Marked as helpful
