我的移动网站文本已被扭曲

Question

虽然桌面版网站运行正常，但 phone 的移动版网站出现了变形。右栏中的文本比左栏大。（以下两页）

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"><a href="http://www.beijosevents.com/jen-mark/"><img class="fade" src="http://www.beijosevents.com/wp-content/uploads/2015/01/wedding-jen-mark.jpg" alt=“jenmarkwedding” width="300" height="200" /></a>
jen + mark
david medal</div>
    <div class="gal"></div>
    <div><a href="http://www.beijosevents.com/jessica-mike/"><img class="fade" src="http://www.beijosevents.com/wp-content/uploads/2014/10/1-cover2.jpeg" alt=“jessicamikewedding” width="300" height="200" /></a>
jessica + mike
jaqueline pilar</div>
    <!-- WEDDINGS GALLERY END-->
    </div>

CSS:

    #gallerypagewidth{width:700px;margin:auto;}
    .gal{float:left;clear:both;}

Answer 1

我不知道是什么原因导致文本随着 window 大小的减小而增大...但是将 div 浮动在右侧可以解决问题。您还有一些可能不需要的空 div。

你可以这样试试，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;
}

我的移动网站文本已被扭曲

My mobile site text has been warped

html

css

wordpress

mobile

canvas