Problema com site responsivo

[Thiago Duarte 23]

Ola, estou fazendo um site responsivo, mas esta dando problema

 

quando diminui a largura da tela no navegador , a imagem ao inves de se ajustar a resolucao do monitor ela cai para linha de baixo

 

http://stampdesign.com.br/web/teste/site/

 

olhem ai

 

gostaria de fazer tambem uma funcao para quando for celular sumir as fotos do tablet que sao essas maiores, alguem pode ajudar ?

 

 

[Ricardo Barantini 33]

Você tem que colocar a medida das suas imagens em porcentagem. Se você utilizar um framework responsive que nem o Bootstrap, basta apenas colocar suas imagens dentro da div e ele já faz isso pra você.

[Thiago Duarte 23]

e como faço para colocar para sumir as divs ?

 

por ex, eu tenho um select ai quando tiver na resolucao para desktop e tablet nao vai aparecer e quando for mobile ira aparecer, como faço isso ?

[Ricardo Barantini 33]

Você tem que usar media-queries.

[Thiago Duarte 23]

mas eu usei, vc deu uma olhada no meu codigo fonte ?

[Public2004 79]

por ex, eu tenho um select ai quando tiver na resolucao para desktop e tablet nao vai aparecer e quando for mobile ira aparecer, como faço isso ?

 

 

Deixe o elemento com "display:none;" e quando entrar na regra mobile, dá um "display:block;" ou outro valor mais adequado conforme o caso.

 

Att.

[Thiago Duarte 23]

Deixe o elemento com "display:none;" e quando entrar na regra mobile, dá um "display:block;" ou outro valor mais adequado conforme o caso.

 

Att.

 

Sera que essa maneira de display none seria a maneira certa ?

[Diogo Rodrigues_79134 4]

Hey Thiago, eu utilizo essa solução para criar um menu com select para mobiles - via JS -, veja:

 

        // MENU DROPDOWN / SELECT	$("<select />").appendTo("#nav");		// Create default option "Go to..."	$("<option />", {	   "selected": "selected",	   "value"   : "",	   "text"    : "Selecione"	}).appendTo("#nav select");		// Populate dropdown with menu items	$("#nav a").each(function() {	 var el = $(this);	 $("<option />", {		 "value"   : el.attr("href"),		 "text"    : el.text()	 }).appendTo("#nav select");	});		$("#nav select").change(function() {	  window.location = $(this).find("option:selected").val();	});

 

Neste caso o menu criado com "ul", dentro da tag "nav", se transforma em um select. Esse script utilizando jQuery cria o select com base nos links dentro da tag "nav" e o insere logo no final do "nav", ou seja, após o "ul".

 

Deste modo, para um site desktop o "select" fica com "display: none"; e quando vc quiser que ele apareça - deixando o "ul" invisível - basta utilizar media-queries.

 

Para entender melhor, dê uma olhada no código fonte do meu blog: http://www.ladodesign.com.br/

 

 

=====

 

 

Sobre o fato de utilizar "display: none" para os mobiles ser correto ou errado, acredito que é mais uma questão de bom senso.

 

 

Por exemplo, utilizar essa técnica em imagens é totalmente inadequado, pois como sabemos elas continuarão a ser carregadas nos mobiles, o que não solucionará nada. Para isso é melhor utilizar uma técnica back-end, ou alguma solução via javaScript, onde uma imagem de tamanho médio é inserida no html, e via JS a substituímos por uma mais adequada ao tamanho da tela do dispositivo.

 

Mas mesmo assim, ainda é melhor utilizar técnicas server side.

 

No entanto, para elementos que não influenciam muito no carregamento da página, acho uma prática interessante utilizar "display:none" - como por exemplo esse menu que você está querendo criar. Imagine você controlando tudo via back-end? E quando precisar dar manutenção?

[Thiago Duarte 23]

 

 

Bacana cara,

 

Onde esta seu js que faz isso ai que vc postou?