css Adaptar uma logo em versões Mobile e Monitores

[Elisame Araújo 0]

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

 

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

 

[b0t.exe 6]

Já tentou utilizar Bootstrap ?

[Elisame Araújo 0]

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.

[b0t.exe 6]

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 ?

[b0t.exe 6]

Se quiser me mandar os códigos por mensagem ou posta aqui, fica mais fácil ajudar...

[Elisame Araújo 0]

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

[Elisame Araújo 0]

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

[b0t.exe 6]

Melhor, compacta todo seu site e manda no privado...

[Elisame Araújo 0]

Agora, b0t.exe disse:

Melhor, compacta todo seu site e manda no privado...

Editei o post

[b0t.exe 6]

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? 

[Elisame Araújo 0]

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 independentes 

[snowstormdelivery 19]

Você quer redimensionar e posicionar a imagem "Nova Cruzeiro do Sul", de acordo com a tela do dispositivo?

[Maujor 144]

@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.
  
 

[Elisame Araújo 0]

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

[Elisame Araújo 0]

Em 18/04/2018 at 07:51, Maujor disse:

@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