Background não responsivo para mobile

[guilhermeft 0]

Olá, senhores, eu estou com um probleminha no meu site.

Recentemente resolvi adicionar um background para melhorar a aparência do site, mas estou tendo problemas com a falta de responsividade para dispositivos mobile. Acontece que o wordpress mostra como se houvesse alguma responsividade, ainda que não satisfatória, mas quando eu acesso por dispositivos mobile realmente, a imagem aparentemente recebe um zoom enorme e deixa o fundo extremamente distorcido e desagradável.

 

E tem algumas coisas mais. O site foi desenvolvido em php, mas eu não manjo muito de programação e por isso estou usando um template que só me permite adicionar custom css.

 

Alguma ideia de como resolver? O site estava previsto para ser lançada domingo, mas não quero colocar ele no ar assim.

Desde já, obrigado :)

 

@Edit

 

Como não consegui fazer o upload de todas as imagens, aqui seguem os links

 

http://prntscr.com/fkwh9v - Site carregado em dispositivo mobile

http://prntscr.com/fkwhz1 - Como o wordpress diz que deveria ser

http://prntscr.com/fkwia9 - Como o wrdpress diz que deveria ser 2.0

http://prntscr.com/fkwipn - Como realmente deveria ser

[Samuel Pietro 15]

Algumas coisas

Primeiro esse tópico deveria estar em WordPress e não HTML & CSS 

Segundo você colocou a meta tag scale 1.0?

E Terceiro caso segundo segue verdadeiro cria no custom css o código especial para dispositivos móveis e salve um segundo background com tamanho reduzido e na widht e height coloca em % com scale 

 

 

[guilhermeft 0]

30 minutos atrás, Samuel Pietro disse:

Algumas coisas

Primeiro esse tópico deveria estar em WordPress e não HTML & CSS 

 

Se alguém puder mover, desde já agradeço :)

 

26 minutos atrás, Samuel Pietro disse:

Segundo você colocou a meta tag scale 1.0?

E Terceiro caso segundo segue verdadeiro cria no custom css o código especial para dispositivos móveis e salve um segundo background com tamanho reduzido e na widht e height coloca em % com scale 

 

Cara, foi como eu disse, não entendo muito de desenvolvimento, então não usei a meta tag. O template estava pronto, só fui fazendo pequenas alterações com o custom css, mas não sei desenvolver o código, o que eu fiz foi adicionar as mudanças conforme eu ia pesquisando e usei o inspecionar elemento do google tbm pra descobrir qual parte do código eu precisava mudar no custom css.

 

Se você pudesse me dizer +/- como deveria ficar o código, acho que consigo me virar.

[Samuel Pietro 15]

OK Vlamos lá

No cabeçalho de seu tema que é o arquivo header.php, adiciona a seguinte linha antes de </head>

Citar

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Salva limpa o historico / cache dos navegadores (Celular e pc) e ve se funcionou

Caso sim ignore o resto --> caso não vá no arquivo style.css e procure uma linha semelhante a seguinte linha 

Citar

body {
    background-image: url('************'); 
}

/* For devices 400px and larger: */
@media only screen and (min-device-width: 700px) {
   body {
    width: 100%;
    height: auto;
    background-image: url('************');

    background-size: cover;

}

onde está com * é o nome do arquivo que está salvo no tema mantenha o mesmo nome entre as aspas

 

vê se funfa

 

[guilhermeft 0]

Tentei o que você disse, mas a meta tag já estava adicionada.

 

Quando procurei a parte do código que você falou, encontrei em reset e quando substituí a primeira parte do código "funcionou". Eu removi o fundo que tinha posto pelos wordpress e adicionei pelo código, então ele entrou como padrão, sem centralizar ou expandir. Até aí tudo bem, seria só adicionar mais algumas linhas pra arrumar isso, mas quando eu adicionei a outra parte do código, esse foi o resultado:

 

http://prntscr.com/fkygoy

 

Tem uma parte do código que é direcionada a mobile /* Mobile Navigation*/ e dentro do que parece ao código que você disse, encontrei isso:

 

Citar

@media screen and (max-width: 768px) {
  .asocial-area {
    float: none;
    text-align: center;
  }

 

e

Citar

@media (min-width: 1000px) {
  .responsive-mainnav,
  .responsive-topnav {
    display: none !important;
  }
}

 

 

@Edit

 

Eu tentei adicionar o código @media na parte mobile também, mas não teve nenhum resultado. Na verdade, quando eu adicionei sem antes mudar o background lá em cima, o resultado foi o mesmo da imagem acima, só que no celular.

[guilhermeft 0]

Eu consegui resolver parcialmente o problema. Vou deixar assim por enquanto. Eu adicionei o código que você disse + algumas coisas pra ele poder se fixar e ficar direitinho, ficou assim:

 

Citar

body {
    background-image: url('images/MODELO1.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%
  /* Fallback for when there is no custom background color defined. */        
}

 

Isso fez com que ele ficasse certo pra PC.

 

Como eu não estava com uma imagem que conseguisse ficar decente em mobile, criei um fundo em uma imagem cinza-escuro e adicionei como background usando a @media, editando a já existente. Ficou assim:

 

Citar

@media screen and (max-width: 768px) {
  .asocial-area {
    float: none;
    text-align: center;
  }
   body {
    width: 100%;
    height: auto;
    background-image: url('images/Sem Título-2.png');
    background-size: cover;
}

 

O que eu preciso agora é de um background que seja compatível com celulares e tablets, creio eu, mas isso eu peço a designer.

E tem outro ponto, creio que para fazer as imagens correspondentes é só usar o valor em px que está indicado no código, assim não tem erro.

 

Me deu um certo trabalho, mas estou feliz que deu "certo". Muito obrigado pela ajuda, mano, sem você eu não teria conseguido :)

 

Ah, não tá bonito, mas tá um feio arrumadinho xD.

[Samuel Pietro 15]

 

3 horas atrás, guilhermeft disse:

Eu consegui resolver parcialmente o problema. Vou deixar assim por enquanto. Eu adicionei o código que você disse + algumas coisas pra ele poder se fixar e ficar direitinho, ficou assim:

 

 

Isso fez com que ele ficasse certo pra PC.

 

Como eu não estava com uma imagem que conseguisse ficar decente em mobile, criei um fundo em uma imagem cinza-escuro e adicionei como background usando a @media, editando a já existente. Ficou assim:

 

 

O que eu preciso agora é de um background que seja compatível com celulares e tablets, creio eu, mas isso eu peço a designer.

E tem outro ponto, creio que para fazer as imagens correspondentes é só usar o valor em px que está indicado no código, assim não tem erro.

 

Me deu um certo trabalho, mas estou feliz que deu "certo". Muito obrigado pela ajuda, mano, sem você eu não teria conseguido :)

 

Ah, não tá bonito, mas tá um feio arrumadinho xD.

Que bom que funcionou, o que eu puder ajudar conte comigo.

[guilhermeft 0]

Se você souber dizer qual o tamanho ideal pras imagens mobile, ajuda :). Se eu falar pro disigner 768px ele vai entender?

[Samuel Pietro 15]

Agora, guilhermeft disse:

Se você souber dizer qual o tamanho ideal pras imagens mobile, ajuda :). Se eu falar pro disigner 768px ele vai entender? lol

Não isso é relativo pede ele pra fazer uma imagem PROPORCIONAL a SMARTPHONES que ele vai criar uma imagem com resolução maior e que ira encaixar em todas resoluções de tela e você ainda podera usar em outras ocasioes

[guilhermeft 0]

Então, a imagem anterior tinha essa resolução, mas ela não estava encaixando, não sei o motivo.

[Samuel Pietro 15]

Agora, guilhermeft disse:

Então, a imagem anterior tinha essa resolução, mas ela não estava encaixando, não sei o motivo.

A imagem anterior tinha uma largura horizontal maior que a vertical e para dispositvos moveis precisamos do tamanho vertical maior que o horizontal.

[guilhermeft 0]

É, então é isso msm, vou falar com ele, valeu brother. x)