When in desktop mode, one img is aligned to the left and the other one is aligned to the right.
However, when viewed on a phone, I am attempting to center align them but they continue to be aligned to the sides.
What could be the issue here?
Provided below is the code I have been working with:
HTML:
<section>
<header>
<h3 class="right">Is your screen broken?</h3>
</header>
<p>
<img class="image left" src="images/moviles/apple/ip4/iphone4.png"/ alt="Replace iPhone 4 Screen, DoctorSmart">
Is the screen of your iPhone cracked or displaying strange marks? No worries. DoctorSmart will install a brand new one so you can enjoy your iPhone like new again.
</p>
<p>DoctorSmart uses top-quality spare parts and offers a 3-month warranty. You won't have to worry about your smartphone anymore</p>
<p class="price">Get your iPhone 4 screen replaced for just €35, including pickup and delivery costs</p>
<footer>
<ul class="actions right">
<li><a href="#" class="button">Fix It</a></li>
</ul>
</footer>
</section>
<section>
<header>
<h3 class="left">Is the back glass broken?</h3>
</header>
<p>
<img class="image right" src="images/moviles/apple/ip4/iphone4back.png" alt="Replace iPhone 4 Back Glass, DoctoSmart"/>
If the back of your precious iPhone 4 has scratches, cracks, don't worry. DoctorSmart can replace the back glass of your iPhone in no time, so you can show off your phone again.
</p>
<p>DoctorSmart uses top-quality spare parts and offers a 3-month warranty. You won't have to worry about your smartphone anymore</p>
<p class="price">Replacing the back glass of your iPhone 4 is only €35, including pickup and delivery costs</p>
<footer>
<ul class="actions right">
<li><a href="#" class="button">Fix It</a></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;
}