Images side-floating when they have to be centered on phone mode - html

Question

On desktop mode, one img is floating left and the other one is floating right.
When I'm on phone mode, I try to align them on the center, but they stay floating.
What am I doing wrong?
Below you can see my code so far.
HTML:
<section>
<header>
<h3 class="right">¿Tienes la pantalla rota?</h3>
</header>
<p>
<img class="image left" src="images/moviles/apple/ip4/iphone4.png"/ alt="Cambiar la pantalla iPhone 4, DoctorSmart">
¿La pantalla de tu iPhone está rota o tiene manchas extrañas?Tiene solución. DoctorSmart te instalará una completamente nueva para que puedas volver a disfrutar de tu iPhone como el primer día.
</p>
<p>DoctorSmart utiliza repuestos de la máxima calidad, ademas de ofrecerte 3 meses de garantía. Para que no tengas que preocuparte por tu smartphone</p>
<p class="precio">Cambia la pantalla para tu iPhone 4 por solo 35€, Gastos de recogida y entrega incluidos</p>
<footer>
<ul class="actions right">
<li>Arréglalo</li>
</ul>
</footer>
</section>
<section>
<header>
<h3 class="left">¿El cristal trasero esta roto?</h3>
</header>
<p>
<img class="image right" src="images/moviles/apple/ip4/iphone4back.png" alt="Cambiar cristal trasero iphone 4, DoctoSmart"/>
Si la parte trasera de tu precioso iPhone 4 tiene arañazos, o esta rota y resquebrajada no te preocupes. DoctorSmart puede cambiar el cristal trasero de tu iPhone en un santiamén, para que vuelvas a fardar de movil.
</p>
<p>DoctorSmart utiliza repuestos de la máxima calidad, ademas de ofrecerte 3 meses de garantía. Para que no tengas que preocuparte por tu smartphone</p>
<p class="precio">El cambio de cristal trasero para tu iPhone 4 sale por solo 35€, gastos de recogida y entrega incluidos</p>
<footer>
<ul class="actions right">
<li>Arréglalo</li>
</ul>
</footer>
</section>
DESKTOP CSS:
/* Image */
.image
{
display: inline-block;
outline: 0;
}
.image img
{
display: block;
width: 100%;
}
.image.centered
{
display: block;
margin: 0 0 2em 0;
}
.image.centered img
{
margin: 0 auto;
width: auto;
}
.image.featured
{
display: block;
width: 100%;
margin: 0 0 2em 0;
}
.image.left
{
float: left;
margin: 2em 2em 2em 2em;
}
.image.right
{
float: right;
margin: 2em 2em 2em 2em;
}
PHONE CSS:
.image.left
{
float: none;
left: 0px
right:0px
}
.image.right
{
float: none;
margin: 2em 2em 2em 2em;
}

Answer 1

No need to split your CSS in two files. You can target different view ports using media queries. Try the below:
.image {
display: inline-block;
outline: 0;
}
.image img {
display: block;
width: 100%;
}
.image.centered {
display: block;
margin: 0 0 2em 0;
}
.image.centered img {
margin: 0 auto;
width: auto;
}
.image.featured {
display: block;
width: 100%;
margin: 0 0 2em 0;
}
.image.left {
#media (min-width: 768px) {
float: left;
margin: 2em 2em 2em 2em;
}
}
.image.right {
#media (min-width: 768px) {
float: right;
margin: 2em 2em 2em 2em;
}
}