Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

brunowaimer

Android erro como resolver?

Por , em Android

Recommended Posts

brunowaimer    0

brunowaimer
Postado

Bom,meu site está pegando no Iphone mas parece que á algo de errado nas plataformas do android. Ele fica tudo de boa mas tem um espaçamento em branco do lado.Descobri o que causava era o texto Placecasa Instalações e o botão do facebook retirando eles pegava.Se eu diminuir eles também pegam mas isso afetaria o design da página.Olhem meu site ele pega de boa nos pc mas não nos androids.

 

 

Doctype vou adiciona-lo depois.

 

http://brunovaimermanda.esy.es/

 

.thumbnail-wrapper #face que estão causando o erro eu acho.

.thumbnail-wrapper #h1

 

Codigo HTML

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout 3 colunas</title>
<link type="text/css" rel="stylesheet" media="screen" href="CSS/estilo.css" />
</head>
<body>
<div id="site">
<div id="header">
<nav id="menu">
<ul>
<li><a href="Bruno vaimer.html">Home</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Projeto</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</div>
<div id="conteudo">
<div class="thumbnail-wrapper">
<img id="cidade" src="cidade.jpg"><h1 class="placecasa">PlaceCasa Instalações</h1><a href="#"><img id="face" src="Imagens/face.jpg" ></a>
</div>
</div>
<div id="footer">
<h1 id="t1"> O Que Oferecemos</H1>
<p class="bigtext">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia
</p>
<div id="meio">
<h1 class="audiotexto">
<img id="audio" src="Imagens/audio.png"/><br />
</h1>
<div id="meio2">
<h1 id="configutexto">
<img id="configu" src="Imagens/configu.png"/><br />
</h1>
<div id="meio3">
<h1 id="wifitexto">
<img id="wifi" src="Imagens/wifi.png" align="right"/><br />
</h1>
</div>
</div>
</div>
</body>
</html>
Código CSS:
* {margin:0;padding:0;}
body
{
font-weight:200;
font: 13px/1.5 Lato, "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
-webkit-font-smoothing:antialiased;
}
#site{
/* Definimos a largura da página */
width:auto;
/* Definirmos a altura da página*/
height:auto;
/* Aqui definiremos a posição que a página ocupará na tela, nesse caso estamos definindo que fique centralizado na tela*/
/*top : posição de cima */
margin-top:0;
/* left: posição de esquerda*/
margin-left:auto;
/* bottom : posição de baixo */
margin-bottom:0;
/* right : posição de direita */
margin-right:auto;
/* Aqui definiremos a cor de fundo da página */
}
#header{
/*Novamente definimos a largura da div*/
/* altura da div */
height:60px;
/* Cor de fundo da div */
}
#conteudo{
/*Novamente definimos a largura da div*/
width:100%;
/* altura da div */
height:500px;
/* Cor de fundo da div */
}
/*@media screen and (min-width: 1100px) and (max-width: 4000px){
#conteudo{
/*Novamente definimos a largura da div
width:70em;
height:500px;
margin:Auto;
}
}
*/
@media screen and (min-width: 900px) and (max-width: 4000px){
#footer{
/*Novamente definimos a largura da div*/
width:70em;
/* altura da div */
height:500px;
/* Cor de fundo da div */
background-color:white;
margin:auto;
}
}
@media screen and (min-width: 800px) and (max-width: 900px){
#footer{
/*Novamente definimos a largura da div*/
width:60em;
/* altura da div */
height:500px;
/* Cor de fundo da div */
background-color:white;
margin: auto;
}
}
@media screen and (min-width: 700px) and (max-width: 800px){
#footer{
/*Novamente definimos a largura da div*/
width:50em;
/* altura da div */
height:500px;
/* Cor de fundo da div */
background-color:white;
margin: auto;
}
}
@media screen and (min-width: 600px) and (max-width: 700px){
#footer{
/*Novamente definimos a largura da div*/
width:40em;
/* altura da div */
height:500px;
/* Cor de fundo da div */
background-color:white;
margin: auto;
}
}
@media screen and (min-width: 500px) and (max-width: 600px){
#footer{
/*Novamente definimos a largura da div*/
width:41em;
/* altura da div */
height:500px;
/* Cor de fundo da div */
background-color:white;
margin: auto;
}
}
#menu {
padding: 18px 16px;
background-color:black;
list-style:none;
position: fixed;
width:100%;
top: 0;
z-index: 99999;
}
#menu ul li a {
padding: 2px 10px;
display: inline-block;
color: white;
text-decoration: none;
}
#menu ul li { display: inline; }
#cidade{
width:100%;
height:500px;
}
#menu ul li a:hover {
color:orange;
}
#t1{
padding:30px ;
font-size: 4.5em;
font-weight: 300;
text-align:center;
}
@media screen and (min-width: 200px) and (max-width: 768px){
#t1{
padding:30px ;
font-size: 2.5em;
font-weight: 300;
text-align:center;
}
}
.bigtext {
font-weight: 100;
font-size: 1.5em;
line-height: 1.5em;
color: #878787;
margin-bottom: 80px;
text-align:center;
}
@media screen and (min-width: 100px) and (max-width: 500px){
#audio{
display: block;
margin: auto;
}
}
.thumbnail-wrapper {
position:relative;
}
.thumbnail-wrapper h1 {
position:absolute;
top:25%;
left:50%;
-webkit-transform:translate3d(-50%, -50%, 0);
-moz-transform:translate3d(-50%, -50%, 0);
transform:translate3d(-50%, -50%, 0);
color:white;
font-size:500%;
text-shadow: 0 1px 7px black;
font-weight: 100;
color: white;
}
.thumbnail-wrapper #face {
position:absolute;
top:60%;
left:50%;
-webkit-transform:translate3d(-50%, -50%, 0);
-moz-transform:translate3d(-50%, -50%, 0);
transform:translate3d(-50%, -50%, 0);
color:white;
font-size:5em;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
font-weight: 100;
color: #fff;
}
@media screen and (min-width: 500px) and (max-width: 4000px){
#meio2{
position:relative;
}
}
@media screen and (min-width: 500px) and (max-width: 4000px){
#meio2 #configu {
position:absolute;
top:-80%;
left:50%;
-webkit-transform:translate3d(-50%, -50%, 0);
-moz-transform:translate3d(-50%, -50%, 0);
transform:translate3d(-50%, -50%, 0);
}
}
@media screen and (min-width: 100px) and (max-width: 500px){
#meio2{
position:relative;
}
}
@media screen and (min-width: 100px) and (max-width: 500px){
#meio2 #configu {
position:absolute;
top:70%;
left:50%;
-webkit-transform:translate3d(-50%, -50%, 0);
-moz-transform:translate3d(-50%, -50%, 0);
transform:translate3d(-50%, -50%, 0);
}
}
@media screen and (min-width: 500px) and (max-width: 4000px){
#meio3{
position:relative;
}
}
@media screen and (min-width: 500px) and (max-width: 4000px){
#meio3 #wifi {
position:absolute;
top:-300%;
left:93%;
-webkit-transform:translate3d(-50%, -50%, 0);
-moz-transform:translate3d(-50%, -50%, 0);
transform:translate3d(-50%, -50%, 0);
}
}
@media screen and (min-width: 100px) and (max-width: 500px){
#meio3{
position:relative;
}
}
@media screen and (min-width: 100px) and (max-width: 500px){
#meio3 #wifi {
position:absolute;
top:500%;
left:50%;
-webkit-transform:translate3d(-50%, -50%, 0);
-moz-transform:translate3d(-50%, -50%, 0);
transform:translate3d(-50%, -50%, 0);
}
}

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

Bruno,

Antes de tudo, leia esse tópico aqui da seção CSS / XML / XHTML / HTML: Como criar um tópico para seu problema.

--------------------------------------

Vamos aos pontos pra ver se resolvemos seu problema (e alguns apontamentos):

  • O DOCTYPE é a primeira coisa que deve ser inserida antes de criar o HTML - Isso o define como HTML5, 4, 3, XML, XHTML...
  • Se existe um espaçamento em branco no mobile, então existe algum elemento que está ultrapassando a viewport width do seu dispositivo.
  • Não se esqueça que existe uma meta tag pra definir o tamanho da página, zoom e etc... Exemplo abaixo:
    <meta name="viewport" content="width=device-width, initial-scale=1">

  • A propriedade overflow: hidden; não vai funcionar no caso de um dispositivo mobile.

Analise esses pontos e informe se encontrou algum erro.

Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Android
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito