Background abre torto no celular

[Nathália Lourenção 0]

Boa tarde, sou nova no fórum então se estiver fazendo algo errado peço desculpas.

Estou desenvolvimento uma loja virtual http://fontena.com.br/layouts/quicksale/, e o problema está na imagem de fundo, em desktop ela está abrindo normal, coloquei um estilo que achei em um site no css:

 

body{background-image:url(http://fontena.com.br/layouts/quicksale/templates/preto/imagens/topo-centro-esq.jpg);

background-color:#ccc;

height:100%;

background-repeat:no-repeat;

-moz-background-size: 100%;

-webkit-background-size:100%;

background-size: 100%;

}

 

Com isso ele abre em qualquer resolução desde que seja desktop, já em celulares a imagem abre toda distorcida, não pega 100% da tela.

 

Vejo duas opções para resolver isso, primeira é conseguir fazer com que a imagem abra 100% em todos celulares e a outra deixar sem imagem de fundo SÓ no celular, fazer algum css que identifique quando estiver abrindo a loja no celular e que tire a imagem de fundo.

 

Alguem saberia me ajudar?

[luan-alves 1]

Olá!!

 

Eu abri por aqui no meu celular e carregou normal.

 

Acredito que o ideal é utilizar Media Queries para que você possa variar o seu layout de acordo com cada resolução.

[Nathália Lourenção 0]

Estranho, pois no meu e em todos outros que abri o background fica somente na esquerda e metade da tela.

Com esse Media Queries, eu preciso somente acrescentar essa tag na pagina principal da loja?

<link rel="stylesheet" href="estilo.css" type="text/css" media="handheld" />

 

e no css 'estilo' eu deixaria o body sem background?

[luan-alves 1]

Estranho, pois no meu e em todos outros que abri o background fica somente na esquerda e metade da tela.

Com esse Media Queries, eu preciso somente acrescentar essa tag na pagina principal da loja?

<link rel="stylesheet" href="estilo.css" type="text/css" media="handheld" />

 

e no css 'estilo' eu deixaria o body sem background?

 

Eu fiz um teste também através do site http://quirktools.com/screenfly/ eu percebi o que você falou.

 

Você usa assim exemplo:

<link rel="stylesheet" media="only screen and (min-width: 320px)"  href="css/template320.css" />
<link rel="stylesheet" media="only screen and (min-width: 1000px)"  href="css/template1007.css" />

 

Estou montado meu porfolio e estou utilizando media queries, você ver como exemplo online (está em construção).

http://www.luan-alves.com.br/novolayout

[Nathália Lourenção 0]

Eu fiz um teste também através do site http://quirktools.com/screenfly/ eu percebi o que você falou.

 

Você usa assim exemplo:

<link rel="stylesheet" media="only screen and (min-width: 320px)"  href="css/template320.css" />
<link rel="stylesheet" media="only screen and (min-width: 1000px)"  href="css/template1007.css" />

 

Estou montado meu porfolio e estou utilizando media queries, você ver como exemplo online (está em construção).

http://www.luan-alves.com.br/novolayout

 

 

Estou fazendo do jeito que você falou

coloquei os links:

<link rel="stylesheet" media="only screen and (min-width: 320px)" href="css/template320.css" />

<link rel="stylesheet" media="only screen and (min-width: 1000px)" href="css/template1007.css" />

 

E no css, estou apenas deixando o fundo com uma cor, dessa forma:

body{

background-color:#ccc;

}

 

mas quando abro no celular, acho que ele não reconhece que é um dispositivo móvel :/

[luan-alves 1]

Estou fazendo do jeito que você falou

coloquei os links:

<link rel="stylesheet" media="only screen and (min-width: 320px)" href="css/template320.css" />

<link rel="stylesheet" media="only screen and (min-width: 1000px)" href="css/template1007.css" />

 

E no css, estou apenas deixando o fundo com uma cor, dessa forma:

body{

background-color:#ccc;

}

 

mas quando abro no celular, acho que ele não reconhece que é um dispositivo móvel :/

 

No caso o media queries faz pela resolução da tela, por exemplo, neste caso ele verifica se a tela tem o valor minimo de 320px e ai executa o arquivo template320.css

<link rel="stylesheet" media="only screen and (min-width: 320px)" href="css/template320.css" />

 

Você criou os dois arquivos ? (template320.css) (template1007.css)

[Nathália Lourenção 0]

No caso o media queries faz pela resolução da tela, por exemplo, neste caso ele verifica se a tela tem o valor minimo de 320px e ai executa o arquivo template320.css

<link rel="stylesheet" media="only screen and (min-width: 320px)" href="css/template320.css" />

 

Você criou os dois arquivos ? (template320.css) (template1007.css)

 

Criei, acho que eu que não estou sabendo a pagina certa onde coloco para chamar o estilo, como é uma loja virtual ela é toda em php, e nas páginas principais não chama nenhum estilo. Desconfio que seja nessa, pois é a unica que possui todas os estilo, mas não sei como por da forma correta:

 

if(!empty($GLOBALS['TPL_CFG']['Stylesheets'])) {

$stylesheets = $GLOBALS['TPL_CFG']['Stylesheets'];

}

else {

$stylesheets = array(

array(

'stylesheet' => 'Styles/basic.css',

),

array(

'stylesheet' => 'Styles/estilocel.css',

),

array(

'stylesheet' => 'Styles/styles.css',

),

array(

'stylesheet' => 'Styles/iselector.css'

),

array(

'stylesheet' => 'Styles/global.css'

),

array(

'stylesheet' => 'Styles/topo.css'

),

array(

'stylesheet' => 'Styles/carrinho.css'

),

array(

'stylesheet' => 'Styles/footer.css'

)

);

[luan-alves 1]

Criei, acho que eu que não estou sabendo a pagina certa onde coloco para chamar o estilo, como é uma loja virtual ela é toda em php, e nas páginas principais não chama nenhum estilo. Desconfio que seja nessa, pois é a unica que possui todas os estilo, mas não sei como por da forma correta:

 

if(!empty($GLOBALS['TPL_CFG']['Stylesheets'])) {

$stylesheets = $GLOBALS['TPL_CFG']['Stylesheets'];

}

else {

$stylesheets = array(

array(

'stylesheet' => 'Styles/basic.css',

),

array(

'stylesheet' => 'Styles/estilocel.css',

),

array(

'stylesheet' => 'Styles/styles.css',

),

array(

'stylesheet' => 'Styles/iselector.css'

),

array(

'stylesheet' => 'Styles/global.css'

),

array(

'stylesheet' => 'Styles/topo.css'

),

array(

'stylesheet' => 'Styles/carrinho.css'

),

array(

'stylesheet' => 'Styles/footer.css'

)

);

 

Eu entrei no site e vi que o link para o css com media queries estava fora da tag <head></head>

Você tem o index dos arquivos ?

 

Criei, acho que eu que não estou sabendo a pagina certa onde coloco para chamar o estilo, como é uma loja virtual ela é toda em php, e nas páginas principais não chama nenhum estilo. Desconfio que seja nessa, pois é a unica que possui todas os estilo, mas não sei como por da forma correta:

 

if(!empty($GLOBALS['TPL_CFG']['Stylesheets'])) {

$stylesheets = $GLOBALS['TPL_CFG']['Stylesheets'];

}

else {

$stylesheets = array(

array(

'stylesheet' => 'Styles/basic.css',

),

array(

'stylesheet' => 'Styles/estilocel.css',

),

array(

'stylesheet' => 'Styles/styles.css',

),

array(

'stylesheet' => 'Styles/iselector.css'

),

array(

'stylesheet' => 'Styles/global.css'

),

array(

'stylesheet' => 'Styles/topo.css'

),

array(

'stylesheet' => 'Styles/carrinho.css'

),

array(

'stylesheet' => 'Styles/footer.css'

)

);

Os arquivos css estão fora da tag <head></head>

você tem o index ?

[Nathália Lourenção 0]

Eu entrei no site e vi que o link para o css com media queries estava fora da tag <head></head>

Você tem o index dos arquivos ?

 

Tenho, mas como disse a loja tem muuuitos arquivos, e o que chama os estilos é um arquivo php, se eu não achar vou ter que ver outra forma de identificar quando for um é um celular

[luan-alves 1]

Tenho, mas como disse a loja tem muuuitos arquivos, e o que chama os estilos é um arquivo php, se eu não achar vou ter que ver outra forma de identificar quando for um é um celular

 

Onde que está variável $stylesheets é impressa ?

 

Tente fazer uma busca por arquivos pesquisando por <head>

[Nathália Lourenção 0]

Onde que está variável $stylesheets é impressa ?

 

Tente fazer uma busca por arquivos pesquisando por <head>

 

Pesquisei por head, nenhum que chame os estilos :/

já tentei de várias formas pra tentar reconhecer quando for celular, mas nenhuma deu certo, ou ele muda em tudo ou em nada :/

[luan-alves 1]

Pesquisei por head, nenhum que chame os estilos :/

já tentei de várias formas pra tentar reconhecer quando for celular, mas nenhuma deu certo, ou ele muda em tudo ou em nada :/

Você está usando algum framework ?

[Nathália Lourenção 0]

Você está usando algum framework ?

 

Não, acho que é melhor fazer um layout fixo mesmo, assim ele irá abrir normal em qualquer lugar

[luan-alves 1]

Não, acho que é melhor fazer um layout fixo mesmo, assim ele irá abrir normal em qualquer lugar

 

Bom também existe essa maneira de fazer:

@media only screen and (min-width: 320px)
{
...
}

 

Ai você pode colocar as resoluções dentro de um mesmo arquivo css. Já que você só tem acesso a 1 acho que assim vai funcionar.

[Nathália Lourenção 0]

Bom também existe essa maneira de fazer:

@media only screen and (min-width: 320px)
{
...
}

 

Ai você pode colocar as resoluções dentro de um mesmo arquivo css. Já que você só tem acesso a 1 acho que assim vai funcionar.

 

não seu certo também, ele puxa o css quando abre no desktop

estou tentando de uma outra maneira, não precisa abrir a parte do desenho no canto da tela, somente ao lado da pagina, assim ele fica centralizado em qualquer resolução, só que o problema no celular ainda continua, a imagem fica mto pequena, ela redimensiona sozinha.

 

html{background:url(http://fontena.com.br/layouts/quicksale/templates/preto/imagens/fundonovo.jpg) #E3E3E3 repeat-y center top;

}

 

alguma solução para abrir o tamanho da imagem normal?

[MK-Pro 3]

cria uma pasta Moblile e usa JS pra identificar o tamanho da tela ai se for tela pequena ir para mobile/pagina.html