My mobile site text has been warped - html

Question

Although the desktop website functions properly, the mobile site from phone is warped. The text in the right column is larger than the left.
(for the following two pages)
http://www.beijosevents.com/galleries/
http://www.beijosevents.com/shopbeijos/
HTML:
<div class="aligncenter"><!-- WEDDINGS HEADER START -->
<img src="http://www.beijosevents.com/wp-content/uploads/2014/07/weddings.png" alt=“weddings” height="80" />
<!--WEDDINGS GALLERY START-->
<div class="gal"><img class="fade" src="http://www.beijosevents.com/wp-content/uploads/2015/01/wedding-jen-mark.jpg" alt=“jenmarkwedding” width="300" height="200" />
jen + mark
david medal</div>
<div class="gal"></div>
<div><img class="fade" src="http://www.beijosevents.com/wp-content/uploads/2014/10/1-cover2.jpeg" alt=“jessicamikewedding” width="300" height="200" />
jessica + mike
jaqueline pilar</div>
<!-- WEDDINGS GALLERY END-->
</div>
CSS:
#gallerypagewidth{width:700px;margin:auto;}
.gal{float:left;clear:both;}

Answer 1

I have no idea what is causing the text to increase in size as the window size is reduced... but floating the divs on the right will solve the issue. You also have a few empty divs that are probably not needed.
You could try it this way, HTML:
<div class="gal first">
<a href="http://www.beijosevents.com/shine-crazy-diamond/">
<img class="fade" src="http://www.beijosevents.com/wp-content/uploads/2015/01/styled-shoots-shine-on.jpg" alt="“shineonyoucrazydiamond”" width="300" height="200">
</a><br>
shine on you crazy diamond<br>
megan welker
</div>
<div class="gal">
<a href="http://www.beijosevents.com/bhldn-secret-garden-shoot/">
<img class="fade" src="http://www.beijosevents.com/wp-content/uploads/2014/10/1-cover1.jpg" alt="“bhldnautumnwedding”" width="300" height="200">
</a><br>
BHLDN secret garden wedding<br>
megan welker
</div>
<div class="clear"></div>
...
CSS:
.gal {
float: left;
margin-left: 50px;
}
.first {
margin-left: 0;
}
.clear {
clear: both;
}