I'm creating a layout for a blog post so everything must be in INLINE CSS. The problem is... it must be responsive!
So, in big ecrans it must have two blocks in each line with same width. In small ecrans, it must have only one. I really don't want to use bootstrap because it doesn't work on IE8-. And I think media querys don't work inline, or am I worng? If I am, cans you explain me how to work with them inline please?
Can you help me please?
PS: You can see my "site" here:
body{
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
} <div id="container" style="max-width:1164px; padding:0px 25px;">
<div id="sections" style="background-color:#e7f0f3; width:100%;">
<div id="house" style="display:inline-block; padding:30px 25px; zoom:1; *display:inline; vertical-align:top;">
<img src="http://i64.tinypic.com/vd3dyx.png" width="93" height="93" style="float:left; margin-right:25px; vertical-align:top;">
<div style="float:left; vertical-align:top;">
<h2 style="font-weight:bold; font-size:20px; display:inline-block;">Housing</h2>
<ul style=" clear:both; margin:0; padding:0; list-style-position: inside; font-size:14px; display:block;">
<li>Aluguer por m2 ou por bastidor ou por unidade de U</li>
<li>Largura de banda de 10 Mbps até 1 Gbps</li>
<li>Backup e/ou Storage centralizados</li>
<li>Sala de Staging, cais de carga e descarga</li>
</ul>
</div>
</div>
<div id="disaster" style="display:inline-block; padding:30px 25px; zoom:1; *display:inline; vertical-align:top;">
<img src="http://i64.tinypic.com/vd3dyx.png" width="93" height="93" style="float:left; margin-right:25px;">
<div style="float:left;">
<h2 style="font-weight:bold; font-size:20px; display:inline-block;">Suporte para Disaster Recovery</h2>
<ul style=" clear:both; margin:0; padding:0; list-style-position: inside; font-size:14px; display:block;">
<li>Housing Equipamentos Cold e Hot Stand-By</li>
<li>Tape Vaulting</li>
<li>Disponibilização de espaço de escritório para Disaster Recovery</li>
<li>Consultodoria</li>
<li>Serviços de ativação de desastre</li>
</ul>
</div>
</div>
<div id="house" style="display:inline-block; padding:30px 25px; zoom:1; *display:inline; vertical-align:top;">
<img src="http://i64.tinypic.com/vd3dyx.png" width="93" height="93" style="float:left; margin-right:25px;">
<div style="float:left;">
<h2 style="font-weight:bold; font-size:20px; display:inline-block;">Administração de Sistemas</h2>
<ul style=" clear:both; margin:0; padding:0; list-style-position: inside; font-size:14px; display:block;">
<li>Análise e Desenho de procedimentos e de workflows</li>
<li>Implementação de regras relativas à segurança da Informação do cliente</li>
<li>Ferramentas e tecnologias operacionais de suporte</li>
<li>Análise de desempenho dos sistemas</li>
<li>Propostas de melhoria do desempenho dos sistemas</li>
<li>Análise e recomendações de preços /desempenho relativamente a novas aquisições ou upgrades</li>
<li>Carregamento, instalação e configuração de software</li>
<li>Suporte a problemas de comunicações</li>
<li>Coordenação, desenho e desenvolvimento de planos de suporte de acordo com as normas </li>
<li>Coordenação de diferentes níveis de suporte de diferentes fornecedores</li>
<li>Desenho e gestão de redes locais</li>
</ul>
</div>
</div>
<div id="disaster" style="display:inline-block; padding:30px 25px; zoom:1; *display:inline; vertical-align:top;">
<img src="http://i64.tinypic.com/vd3dyx.png" width="93" height="93" style="float:left; margin-right:25px;">
<div style="float:left;">
<h2 style="font-weight:bold; font-size:20px; display:inline-block;">Suporte para Disaster Recovery</h2>
<ul style=" clear:both; margin:0; padding:0; list-style-position: inside; font-size:14px; display:block;">
<li>Suporte operacional no local</li>
<li>Verificação visual de equipamentosa</li>
<li>Substituição de componentes</li>
<li>Exemplo de comandos segundo instruções específicas</li>
<li>Monitorização de Sistemas 24/24h</li>
</ul>
</div>
</div>
</div>
</div>
</div>
