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.
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 !
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.
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
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
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.
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; }
}
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.
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.
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!
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!
Perfect challenge for me!
Just had some problems with the 2 little icons. Cant seem to center them correctly.
Can someone help me?
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; }
