Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
>
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.
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 funfaTentei 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:
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.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.>
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.
Se você souber dizer qual o tamanho ideal pras imagens mobile, ajuda :). Se eu falar pro disigner 768px ele vai entender?
>
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
Então, a imagem anterior tinha essa resolução, mas ela não estava encaixando, não sei o motivo.
>
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.
É, então é isso msm, vou falar com ele, valeu brother. x)
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