I'm a beginner in CSS , I have% of two and three columns that fit well when displayed in PC , but I need to change their behavior when viewed < in> mobile . I would like divs to be one underneath the other but I can not.
Below is my code, CSS is divs because I'm using it inside Wordpress .
<div id="site" style="width:100%; margin-top:0; margin-left:auto; margin-bottom:0; margin-right:auto; background-color:#666;">
<div id="header" style="width:100%; background-color:#ffffff;">
<div id="conteudo" style="width:100%;height:400px; background-color:#0F0">
<div id="conteudo-left" style="width:50%; float:left; background-color:#fff; ">
<center><a href="https://www.igrejanet.webpress.net.br/tutorial/" target="_blank"><img style="width: 100%; max-width: 450px; padding: 15px;" src="https://www.webpress.net.br/img/tutoriais.jpg"></a><br><center><h3><spanstyle="color: #0091d5;">APRENDA FÁCIL</span><h3>
<p style="padding: 5px 25px 25px 25px; color: black;"> A<span style="text-transform: lowercase;">cesse nossos tutoriais de ajuda e saiba como editar seu site e
usar seu painel Administrativo, com dicas de edição ilustradas passo a passo.</span></p>
<h5><a href="https://www.igrejanet.webpress.net.br/tutorial/" target="_blank"><img style="width: 100%; max-width: 150px; " src="https://www.webpress.net.br/img/clique-aqui.jpg"></h5></a></center></center></div><divid="conteudo-right" style="width:50%; float:left; background-color:#fff;">
<center><a href="https://www.webpress.net.br/central" target="_blank"><img style="width: 100%; max-width: 450px; padding: 15px;" src="https://www.webpress.net.br/img/mensalidade.jpg"></a><br><center><h3><spanstyle="color: #0091d5 ;">CENTRAL DE PAGAMENTOS</span><h3>
<p style="padding: 5px 25px 25px 25px; color: #000000;"> É <span style="text-transform: lowercase;">muito fácil pagar sua mensalidade, basta acessar nossa central de pagamentos
e pagar via boleto ou cartão de crédito agora mesmo.</span></p>
<h5><a href="https://www.webpress.net.br/central" target="_blank""><img style="width: 100%; max-width: 150px; " src="https://www.webpress.net.br/img/clique-aqui.jpg"></h5></a></center></center></div></div><divid="servicos" style="width:100%; background-color:#fff;">
<div id="servicos-dois" style="display: inline-block; width: 33%; background-color:#fff;">
<center><img style="width: 100%; max-width: 100px;" src="https://www.webpress.net.br/img/icone-servicos.png"><h2style="color: #0091d5;">Suporte</h2><br><br>
<p>Precisando de suporte acesse a página abaixo</p>
<p><a href="https://www.webpress.net.br/suporte/" target="_blank">http://www.webpress.net.br/suporte/</a></p>
</center>
</div>
<div id="servicos-um" style="float: left; width: 33%; background-color:#fff;">
<center><img style="width: 100%; max-width: 100px;" src="https://www.webpress.net.br/img/icone-atendimento.png"><h2style="color: #0091d5;">Atendimento</h2><br><br>
<p>WhatsApp: (51)992475352</p><p>E-mail: [email protected]</p>
</center>
</div>
<div id="servicos-tres" style="float: right; width: 33%; background-color:#fff;">
<center><img style="width: 100%; max-width: 100px;" src="https://www.webpress.net.br/img/icone-horario.png"><h2style="color: #0091d5;">Horário</h2><br><br>
<p>Segunda a sexta</p>8 às 12h - 14 às 18h
</center>
</div>
</div>
</div>