@FelipeCastroDEV
@gpolese
Submitted
Não consegui deixar o site responsivo pois nao sabia sobre o uso de PX dificultar nisso, proximo desafio usarei REM e %
dicas para deixar meu site responsivo, por favor! tambem estou tendo dificuldade para postar o projeto aqui na hora da visualização, quando aperta para ir pro meu site nao vai para meu projeto e sim para uma captura de tela, se puder me escrever como postar projeto corretamente nessa plataforma me ajudara muito.
@FelipeCastroDEV
Posted
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
Submitted
I always have problems with content overflowing and generating horizontal scroll (still not sure if it's 100% fixed in this project), specially on mobile. Besides that, I'm a beginner at JavaScript and would appreciate any tips regarding my code.
@FelipeCastroDEV
Posted
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
Submitted
@FelipeCastroDEV
Posted
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
Submitted
The greatest challenge for me was dividing the card equally (50% image and 50% product description) and making the website responsive. ANY tips on the positioning and responsive aspects will be very appreciated, I'm still learning! Thank you so much for reading.
@FelipeCastroDEV
Posted
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
Submitted
The greatest challenge for me was dividing the card equally (50% image and 50% product description) and making the website responsive. ANY tips on the positioning and responsive aspects will be very appreciated, I'm still learning! Thank you so much for reading.
@FelipeCastroDEV
Posted
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
Submitted
I've always had some issues with height when it comes to mobile. When I toggle device toolbar in inspect, on some of the smaller phones the top of the container just disappears.
Any idea on how can I watch out for this in the future?
Any feedback on how can I improve is much appreciated!
@FelipeCastroDEV
Posted
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
@marccc44
Submitted
Perfect challenge for me!
Just had some problems with the 2 little icons. Cant seem to center them correctly.
Can someone help me?
@FelipeCastroDEV
Posted
you can make that align manual using padding-right in the icon element and background-repeat for the image doesn't duplique
span.eth { background: url(img/icon-ethereum.svg) no-repeat; height: 18px; width: 18px; display: inline-block; padding-right: 2px; }
span.clock { background: url(img/icon-clock.svg) no-repeat; width: 18px; height: 18px; padding-right: 6px; display: inline-block; }
