DIV responsiva

[Paulo Edson]

Bom dia pessoal! Tenho um site na plataforma Wordpress e sei extremamente o básico de HTML e CSS. Com o pouco conhecimento que sei, fiz uma DIV, entretanto ela não fica bem quando acessado de celular, tablet, etc (pois eu estabeleci tamanhos). Acontece que com % esses trecos nunca funcionam.. Deve ter uma tag secreta ou algo assim para fazer o milagre que preciso rsrs... Se alguém puder me ajudar, agradeço xD

 

Página: http://stellarspace.com.br/discografia

 

No post

<div id="album"><div id="nome_album">Marionette - First Mini Album</div><div id="imagem_album">[gallery type="thumbnails" link="file" ids="211,212,213"]</div><div id="info2_album"><div id="dados_album">Faixas</div><div id="respostas_album">1. <a href="http://stellarspace.com.br/letras/tie" target="_blank">T.I.E</a>2. <a href="http://stellarspace.com.br/letras/marionette" target="_blank">Marionette</a>3. <a href="http://stellarspace.com.br/letras/guilty" target="_blank">Guilty</a>4. <a href="http://stellarspace.com.br/letras/take-it-all" target="_blank">Take it All</a>5. <a href="http://stellarspace.com.br/letras/study" target="_blank">Study</a>6. Marionette (Inst.)7. Study (Remix Ver.)</div></div><div id="info2_album"><div id="dados_album">Lançamento</div><div id="respostas_album">12/02/2014</div><div id="info2_album"><div id="dados_album">Onde Comprar</div><div id="respostas_album"><strong>Digital:</strong> <a href="https://itunes.apple.com/us/album/malioneteu/id820079901" target="_blank">iTunes</a><strong>Físico:</strong> <a href="http://www.ebay.com/sch/i.html?_from=R40&_trksid=p2050601.m570.l1313.TR0.TRC0.H0.XStellar+Marionette.TRS0&_nkw=Stellar+Marionette&ghostText=&_sacat=0" target="_blank">eBay</a></div></div></div><div id="info2_album" style="width:305px;"><div id="dados_album" style="margin-bottom:2px;">Unboxing</div><div id="respostas_album"><iframe width="285" height="160" src="https://www.youtube.com/embed/ei2F_yfOxr4?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div></div></div>

CSS

#post_relacionados {margin-top:5px; margin-right:5px; height:auto; overflow:hidden; float:left;}	#titulo_relacionados {height:auto; width:auto; text-align:center;}#imagem_relacionados img {opacity: 0.7; filter: alpha(opacity=70);}#imagem_relacionados img:hover {opacity: 1.0; filter: alpha(opacity=100);}

[Arley Fellipe]

Olá, eu uso ul e li para se adptar nos dispositivos, usando colunas deste tipo no pc ela fica horizontal e no smartphone fica na vertical veja um exemplo simples abaixo.

<style>.ul-li-colunas li{width:auto;float:left;list-decoration:none;}</style><ul class="ul-li-colunas"><li>imagem1</li><li>imagem2</li><li>imagem3</li></ul>

Digitei aqui mesmo o que lembrei, teste e me diz o que achou;