网页在手机上看起来不同

Question

我的网站上有一个页面有一个大型流程图，如下所示：

$-----$
 \   /  ( Assuming $ is an image and -, /, \ are lines )
  $ $

当我在手机上查看此页面时，它看起来很糟糕。图像和线条分散。我该如何解决这个问题？

谢谢！

HTML：

<div class="imagecontainer">
    <img class="image" src="somesource">
    <img class="image" src="somesource">
    <img class="image" src="somesource">
    <img class="image" src="somesource">
</div>    

<div id="line1" class="line"></div>

CSS：

.image {
    background-color: #fff;
    border: 2px solid #000000;
    width: 120px;
}

.line {
    background-color: #000000;
    position: absolute;
    width: 5px;
}

#line1 {
    height: 237px;
    left: 300px;
    top: 300px;
}