调整移动设备页面的大小

Question

我有点像HTML新手，但我的任务是为我们的客户创建目标网页。

我已经为此工作了好几周（不要笑）。我知道这需要一位经验丰富的网络开发人员做几分钟，但我现在在这里真的很挣扎。

我设法将页面布局像我最初创建的PSD（我和我的大嘴在Photoshop中设计它，现在我的老板要我用HTML创建它......）但是我不能让它在移动设备上表现得像。

对于MOST部分，它在桌面Chrome浏览器中运行正常（但在Safari中似乎效果不佳）。

此时我的大脑已经融化了，有人可以帮忙吗？

链接到它在桌面上应该是什么样子：http://jwemploymentlaw.co.uk/magento/media/V3_LandingPage_CastIronBaths_noborder.jpg

在移动设备上，它需要将图像叠加在一起，或者并排放置2个？在这一点上，我甚至无法理解如何做到这一点。

代码：

<div class="std"><div>&nbsp;</div>
<div style="background: #d5d5d5; padding-top: 20px;">
<h2 style="text-align: center;"><span style="color: #333333; font-size: xx-large; font-size: 3vw; font-family: Open Sans;">Antique Style Cast Iron Baths</span></h2>
<p style="padding-left: 10%; padding-right: 10%; padding-bottom: 25px;">
<span style="font-family: Open Sans; color: #333333; font-size: medium; font-size: 1.5vw; font-weight: 50;">Our baths have been manufactured from cast iron for decades, with porcelain enamel fused on to the casting at high temperatures to give a gloss surface which is highly resistant to scratching and staining. The superior exterior finish is smoothed and primed ready for painting in your choice of colour. When you buy your cast iron bath from Aston Matthews you are investing in the highest quality product from the originator of the design, at the best possible price.</span></p>
</div>
<p>&nbsp;</p>



<div style="float: left; width: 100%; align-content: center; margin-left: 0%; margin-right: 0%;">
<div style="display: inline-block;">
<div class="col" style="width: 25%; float: left; text-align: center;"><img style="text-align: center; max-width: 100%; height: auto; width: auto\9; display: inline-block;" alt="test" src="http://jwemploymentlaw.co.uk/magento/media/resident_logo.png" /></div>
<div class="col" style="width: 50%; float: left; font-size: medium; text-align: center; display: inline-block;">
<p style="text-align: center; font-family: Open Sans; color: #333333; font-size: 1.25vw"><em>"Excellent one-to-one service, lovely staff, always there to help"</em></p>
<p style="text-align: center; font-family: Open Sans; color: #333333; font-size: 1.25vw"><em>"Right from the beginning Steve Cook at Aston Matthews was proactive with ideas around our design concept"</em></p>
<p style="text-align: center; font-family: Open Sans; color: #333333; font-size: 1.25vw"><em>"The staff at Aston Matthews were extremely helpful when I was planning my bathroom refurbishment"</em></p>
</div>
<div class="col" style="width: 25%; float: left; text-align: center;"><img style="text-align: center; max-width: 100%; height: auto; width: auto\9; display: inline-block;" alt="test" src="http://jwemploymentlaw.co.uk/magento/media/houzz_logo.png" /></div>
</div></div>



<div class="container" style="padding-top: 20px; align: center; float: left">

<div class="container-two" style="position: relative; z-index: 1; top: 10px; float: left;">
<div style="background: #3d88a8; width: 100%; height: 175px; text-align: center; padding-top: 0px; z-index: -1; position: relative;">
    <p>&nbsp;</p>
    <p style="text-align: center; font-size: 25px; font-size: 2.5vw; font-family: Open Sans; color: #ffffff; position: absolute; top: 20%; left: 100px; right: 100px; font-style: normal;">Save Up To 40% On Our Bestselling Cast Iron Baths</p>
</div>

<div class="image-container" style="position: relative; left: 10px; right: 10px; float: left; text-align: center; margin-left: 5%; margin-right: 5%; width: 100%">

<div class="row" style="float: left; text-align: center; padding-top: 10px; padding-left: 0%; padding-right: 0%; width: 100%; height: auto; font-size: 1vw; position: relative; top: -90px">

<div class="col" style="position: relative; float: left; padding: 5px; width: 17%;"><img style="max-width: 100%; height: auto; width: auto\9;" alt="" src="http://jwemploymentlaw.co.uk/magento/media/1.jpg" />
<div class="col" style="position: absolute; bottom: 5px; left: 5px; right: 5px; z-index: 1; background: #3d88a8; opacity: 0.80; width: auto; height: auto; padding: 5px; text-align: center; font-family: Open Sans; color: #ffffff;">
<em>Roma Clawfoot Tubs</em></div>
</div>
<div class="col" style="position: relative; float: left; padding: 5px; width: 17%;"><img style="max-width: 100%; height: auto; width: auto\9;" alt="" src="http://jwemploymentlaw.co.uk/magento/media/2.jpg" />
<div class="col" style="position: absolute; bottom: 5px; left: 5px; right: 5px; z-index: 1; background: #3d88a8; opacity: 0.80; width: auto; height: auto; padding: 5px; text-align: center; font-family: Open Sans; color: #ffffff;">
<em>Luxor Clawfoot Tubs</em></div>
</div>
<div class="col" style="position: relative; float: left; padding: 5px; width: 17%;"><img style="max-width: 100%; height: auto; width: auto\9;" alt="" src="http://jwemploymentlaw.co.uk/magento/media/3.jpg" />
<div class="col" style="position: absolute; bottom: 5px; left: 5px; right: 5px; z-index: 1; background: #3d88a8; opacity: 0.80; width: auto; height: auto; padding: 5px; text-align: center; font-family: Open Sans; color: #ffffff;">
<em>Rimini Bathtubs</em></div>
</div>
<div class="col" style="position: relative; float: left; padding: 5px; width: 17%;"><img style="max-width: 100%; height: auto; width: auto\9;" alt="" src="http://jwemploymentlaw.co.uk/magento/media/4.jpg" />
<div class="col" style="position: absolute; bottom: 5px; left: 5px; right: 5px; z-index: 1; background: #3d88a8; opacity: 0.80; width: auto; height: auto; padding: 5px; text-align: center; font-family: Open Sans; color: #ffffff;">
<em>Verona Bathtubs</em></div>
</div>
<div class="col" style="position: relative; float: left; padding: 5px; width: 17%;"><img style="max-width: 100%; height: auto; width: auto\9;" alt="" src="http://jwemploymentlaw.co.uk/magento/media/5.jpg" />
<div class="col" style="position: absolute; bottom: 5px; left: 5px; right: 5px; z-index: 1; background: #3d88a8; opacity: 0.80; width: auto; height: auto; padding: 5px; text-align: center; font-family: Open Sans; color: #ffffff;">
<em>Bateau Luxury Tubs</em></div>
</div>
</div>
<div class="row" style="padding: 10px;">&nbsp;</div>
<div class="row" style="align: center; float: middle; padding-top: 10px; padding-left: 0%; padding-right: 0%; width: 100%; font-size: 1vw; position: relative; top: -90px">
<div class="col" style="position: relative; float: left; padding: 5px; width: 17%"><img style="max-width: 100%; height: auto; width: auto\9;" alt="" src="http://jwemploymentlaw.co.uk/magento/media/6.jpg" />
<div class="col" style="position: absolute; bottom: 5px; left: 5px; right: 5px; z-index: 1; background: #3d88a8; opacity: 0.80; width: auto; height: auto; padding: 5px; text-align: center; font-family: Open Sans; color: #ffffff;">
<em>Brunel Luxury Bathtubs</em></div>
</div>
<div class="col" style="position: relative; float: left; padding: 5px; width: 17%;"><img style="max-width: 100%; height: auto; width: auto\9;" alt="" src="http://jwemploymentlaw.co.uk/magento/media/7.jpg" />
<div class="col" style="position: absolute; bottom: 5px; left: 5px; right: 5px; z-index: 1; background: #3d88a8; opacity: 0.80; width: auto; height: auto; padding: 5px; text-align: center; font-family: Open Sans; color: #ffffff;">
<em>Epoca Bathtubs</em></div>
</div>
<div class="col" style="position: relative; float: left; padding: 5px; width: 17%;"><img style="max-width: 100%; height: auto; width: auto\9;" alt="" src="http://jwemploymentlaw.co.uk/magento/media/8.jpg" />
<div class="col" style="position: absolute; bottom: 5px; left: 5px; right: 5px; z-index: 1; background: #3d88a8; opacity: 0.80; width: auto; height: auto; padding: 5px; text-align: center; font-family: Open Sans; color: #ffffff;">
<em>Novara Built-In Tubs</em></div>
</div>
<div class="col" style="position: relative; float: left; padding: 5px; width: 17%;"><img style="max-width: 100%; height: auto; width: auto\9;" alt="" src="http://jwemploymentlaw.co.uk/magento/media/9.jpg" />
<div class="col" style="position: absolute; bottom: 5px; left: 5px; right: 5px; z-index: 1; background: #3d88a8; opacity: 0.80; width: auto; height: auto; padding: 5px; text-align: center; font-family: Open Sans; color: #ffffff;">
<em>Slipper Soaking Tubs</em></div>
</div>
<div class="col" style="position: relative; float: left; padding: 5px; width: 17%;"><img style="max-width: 100%; height: auto; width: auto\9;" alt="" src="http://jwemploymentlaw.co.uk/magento/media/10.jpg" />
<div class="col" style="position: absolute; bottom: 5px; left: 5px; right: 5px; z-index: 1; background: #3d88a8; opacity: 0.80; width: auto; height: auto; padding: 5px; text-align: center; font-family: Open Sans; color: #ffffff;">
<em>Hanover Bathtubs</em></div>
</div>
</div>
</div>