-1

Tenho um início de website e estou tentando desenvolve-lo num layout responsivo. No momento o site está assim: http://40kgg.zz.vc/ (domínio temporário, apenas para testes).

Para a minha resolução, no caso 1920x1080, o site está perfeito, mas em resoluções menores, o parágrafo "Presidente", não mantem a proporção no tamanho da fonte. Uso position:absolute no parágrafo e position:relative no img holder. Como não encontrei lugar adequado para armazenar o site online, o upei no mega para que possam me ajudar melhor, se puderem.

https://mega.co.nz/#!w0VxGKwB!RfrcrvqKBFGHMpyJtS0BtnN0IjXDkMERqsLaRKlmmkA

5

3 Respostas 3

1

Se tu vai trabalhar com responsividade, eu te aconselho a usar Grid. Eu particularmente prefiro trabalhar com Fundation do que com Bootstrap, mas isso varia de acordo com o gosto de cada um.

Com Fundation tu consegue definir como cada conteúdo vai ser exibido para tipo de resolução de tela de maneira muito fácil.

Se tu prefere fazer tudo na mão, te recomendo usar o Chrome Developer Tools (Tecla F12 windows no Chrome) e usar os recursos de Mobile que ele oferece para definir teus break-points e ir criando o teu CSS responsivo.

Boa sorte no projeto :)

1

Na verdade, o parágrafo mantem a fonte da mesma forma que o nav mantem a fonte também, o tamanho da tua fonte não é alterado com base na resolução da tela.

Se você quer que o texto presidente seja redimensionado com o texto que existe dentro do "Qualidade e Elegância", você precisa que o texto esteja inserido dentro da imagem.

Adicione o texto na imagem e retira esse parágrafo, vai resolver teu problema e o parágrafo nunca vai ficar fora da imagem.

Você deve ter separado o texto da imagem buscando o efeito do hover que percebi no teu site, para conseguir isso tu precisa utilizar de duas imagens, e ao invez de mudar as propriedades do parágrafo no :hover, troque a imagem para a outra, como por exemplo:

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Fonte: https://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover

PS.: Você também pode adicionar uma transação para suavizar o efeito.

0

Acredito que a melhor ferramenta para trabalhar com responsividade seria o Bootstrap, que é responsável por esse trabalho.

Outra sugestão que tenho é de utilizar sempre resoluções baixas para o desenvolvimento das páginas, tendo em vista que a resolução 1920x1080 que você está utilizando corresponde a uma pequena parcela dos usuários (acredito eu).

Para testes sugiro as opções de testes de resolução que os próprios navegadores possuem. No firefox: Opções > desenvolvedor > Modo de design adaptável.

O caminho que utilizo é de preparar o site para resoluções menores, consequentemente para as maiores o bootstrap se adaptará corretamente. Espero ter ajudado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .