Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia,
Estou projetando um site aqui e o template que eu estou utilizando atualmente possui uma configuração no seu CSS para se adaptar as mídias como Celulares e Tablets. Porém eu não tenho muita prática com "media", e não sei como fazer isso.
O que eu quero neste momento é fazer com que uma imagem - uma logo da empresa no caso - se adapte as variações de tamanho de tela porque o código originalmente usa apenas um texto aonde fica a logo, e por isso ele se adapta facilmente, mas eu não consigo isso para a o texto.
Num exemplo prático:
Mobile
/monthly_2018_04/mobile.JPG.1265999450661307e94587d940ddb595.JPG" />
Tela
O código css é muito grande para postar aqui, e não encontrei uma forma de importar ele em anexo no tópico, mas caso seja necessário eu posto ele aqui
O template possui essa folha de estilos, mas eu não sei qual o uso dela de fato.
Caso necessário, eu posto o código de ambos, do "bootstrap.min.css" e o do template em si.
Adiciona este código no HEAD se não tiver, pra fazer um teste...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Essa foto tá como background ?Se quiser me mandar os códigos por mensagem ou posta aqui, fica mais fácil ajudar...
>
22 minutos atrás, b0t.exe disse:
Adiciona este código no HEAD se não tiver, pra fazer um teste...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Essa foto tá como background ?
Este código já está presente dentro da página>
19 minutos atrás, b0t.exe disse:
Se quiser me mandar os códigos por mensagem ou posta aqui, fica mais fácil ajudar...
Vou mandar o código do bootstrap e do css da página
Eis os links para os códigos
http://br426.teste.website/~novacruz/css/bootstrap.min.css
http://br426.teste.website/~novacruz/css/templatemo_style_home.css
Por hora, ainda são links temporários, mas acredito que deve ser suficientes para ajudar
http://br426.teste.website/~novacruz/
Este é o link temporário que estou usando para testar o site
Melhor, compacta todo seu site e manda no privado...
>
Agora, b0t.exe disse:
Melhor, compacta todo seu site e manda no privado...
Editei o post
Da um Ctrl + F e pesquisa por ' .main-header ' no arquivo ' templatemo_style_home.css '
e substitui o código pelo que eu postei...
Fazendo a substituição a sua div de navegação ou menus, vai ficar no topo em todos os dispositivos...
.main-header {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
margin: 0 auto;
z-index: 1000;
top: 0;
-webkit-transition: all 150ms ease-in-out;
-moz-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
}
O restante que você quer fazer eu não entendi, você não quer que o menu se " esconda " em dispositivos moveis?>
11 minutos atrás, b0t.exe disse:
Da um Ctrl + F e pesquisa por ' .main-header ' no arquivo ' templatemo_style_home.css '
e substitui o código pelo que eu postei...
Fazendo a substituição a sua div de navegação ou menus, vai ficar no topo em todos os dispositivos...
.main-header {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
margin: 0 auto;
z-index: 1000;
top: 0;
-webkit-transition: all 150ms ease-in-out;
-moz-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
}
Vou testar esse código quando chegar em casa.
Uma observação é que o template original era um site scrolled, em que todo o conteúdo vai em uma página só, e os links eram apenas âncoras dentro da página.
Então, eu aproveitei o template e criei páginas independentesVocê quer redimensionar e posicionar a imagem "Nova Cruzeiro do Sul", de acordo com a tela do dispositivo?
/profile/215175-elisame-ara%C3%BAjo/?do=hovercard" data-mentionid="215175" href="/profile/215175-elisame-ara%C3%BAjo/" rel="">@Elisame Araújo
O problema ocorre porque o logo é uma imagem inserida como fundo e o texto (NOVA CRUZEIRO DO SUL) é uma imagem inserida na HTML. São duas imagens.
Sugestões:
1-) Inserir no template original o texto NOVA CRUZEIRO DO SUL e estilizar esse texto de modo a obter o efeito igual ao da imagem.
2-) Criar uma nova imagem composta pelas duas (o circulo + o texto) e defini-la como imagem de fundo.
>
Em 17/04/2018 at 14:40, b0t.exe disse:
Da um Ctrl + F e pesquisa por ' .main-header ' no arquivo ' templatemo_style_home.css '
e substitui o código pelo que eu postei...
Fazendo a substituição a sua div de navegação ou menus, vai ficar no topo em todos os dispositivos...
.main-header {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
margin: 0 auto;
z-index: 1000;
top: 0;
-webkit-transition: all 150ms ease-in-out;
-moz-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
}
O restante que você quer fazer eu não entendi, você não quer que o menu se " esconda " em dispositivos moveis?
Eu testei aqui, para a versão mobile ele ficou ótimo, mas o problema está na versão de Desktop a logo fica pequena demais e descentralizada
Basicamente o que eu quero é:
Em Desktop a imagem da Logo fique com 100% do tamanho, no caso a largura lá no template é de 290px
Quando visualizado em mobile, tipo celular ou tablets, ele iria se ajustar a largura da tela sem distorcer o menu. Para celulares eu encontrei a largura de 180px - o que dá mais ou menos 62% do tamanho original.
O que quero é que a imagem saia de 290px no Desktop (100%) e vá para os 180px (62%) no celular>
Em 18/04/2018 at 07:51, Maujor disse:
/profile/215175-elisame-ara%C3%BAjo/?do=hovercard" data-mentionid="215175" href="/profile/215175-elisame-ara%C3%BAjo/" rel="">@Elisame Araújo
O problema ocorre porque o logo é uma imagem inserida como fundo e o texto (NOVA CRUZEIRO DO SUL) é uma imagem inserida na HTML. São duas imagens.
Sugestões:
1-) Inserir no template original o texto NOVA CRUZEIRO DO SUL e estilizar esse texto de modo a obter o efeito igual ao da imagem.
2-) Criar uma nova imagem composta pelas duas (o circulo + o texto) e defini-la como imagem de fundo.
Seguinte, eu até cogitei essa opção, mas no caso são duas div's independentes...
Uma no qual vai a logo em círculo (Padrão do Template) e outra que iria o texto com o nome da empresa, no qual eu substituí por uma imagem. Mas eu posso testar essa opção, mas teria que mexer um pouco na estrutura da class
Já tentou utilizar Bootstrap ?