0
I’m a beginner in CSS, have divs two and three columns that fit well when displayed in PC, but I need to modify their behavior when viewed in the mobile. I would like the divs were under each other but I’m not getting.
Below follows my code, the CSS is inline because I’m using inside the 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><span style="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>
<div id="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><span style="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>
<div id="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">
<h2 style="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">
<h2 style="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">
<h2 style="color: #0091d5;">Horário</h2><br><br>
<p>Segunda a sexta</p>8 às 12h - 14 às 18h
</center>
</div>
</div>
</div>
How to include the CSS in the question?
– Sam
Goveia I’ll tell you right away, using "inline" styles you won’t be able to! Simply pq vc won’t be able to build your Breaking points
@mediastraight in the style of the tag. Also by CSS hierarchy the direct styles in the tag have more weight than what is written in a file . css for example, so even using an external CSS you won’t be able to override the style that is already in the tag. Summing up if u don’t take the styles from within the tag vc won’t be able to make a responsive website.– hugocsl
@dvd or then sapecando a ! Import in 100% of the classes rss... better not even give idea right :D
– hugocsl
I had to Google "Pogar", but it’s from there to worse haha
– hugocsl
@dvd these crossbrowser problems with Safari for me is complicated because I don’t work on Mac so Windows, and the latest version of Safari for Windows I think is from 2012... But put there that I try to give you a strength yes. If the Loader you used was exactly that already try to change the
rotate()forrotateZ()to test, it is accelerated by hardware, sometimes sure will know, because the classes I have seen that use -Webkit-. If you want to post the question help what you can. It’s worth the compliment, but you’re the metre here! : p– hugocsl
@dvd the name of the animation tb has to have the prefix -Webkit-Animation:name sascumin prefix fills the bag...
– hugocsl