首页的编码问题-HTML/CSS编码

Question

所以我刚刚完成了一个名为https://services.codexcentre.com，并且能够在我的电脑上精细地复制页面。

但当我让我的朋友查看网站时，她在4个盒子所在的第一页告诉我，它看起来挤在一起了——这只在手机上显示(PC上看起来很好。(

当我在手机上重复这个问题时，我发现了同样的问题，不知道为什么会这样。我把下面的代码粘贴到了它的结构上。有一个想法，这是一个wordpress网站，由于wordpress列结构的问题，我自定义了这个部分的代码。

如有任何反馈，我们将不胜感激。

<style>
.gallery_container{
max-width: 1200px;
padding: 30px;
margin: 20px auto;
}
#shop_column{
column-count: 2;
column-gap: 15px;
}
#shop_page{
text-align: center;
font-family: 'Tangerine', cursive;
font-size: 36px;
padding: 0px;
margin: 0px auto;
}
#shop_image{
cursor: pointer;
width: 750px;
height: 345px;
padding: 10px;
margin: 10px auto;
}

</style>

<div class="gallery_container">
<div id="shop_column">
<a href="http://services.codexcentre.com/new-build/">
<img id="shop_image" src="imgs/home01.jpg">
</a>
<p id="shop_page">New Build</p>
<a href="http://services.codexcentre.com/dining-remodel/">
<img id="shop_image" src="imgs/dining01.jpeg">
</a>
<p id="shop_page">Living Room Remodel</p>
</div>
<div id="shop_column">
<a href="http://services.codexcentre.com/kitchen-remodel/">
<img id="shop_image" src="imgs/kitchen01.jpg">
</a>
<p id="shop_page">Kitchen Remodel</p>
<a href="http://services.codexcentre.com/bathroom-remodel/">
<img id="shop_image" src="imgs/bathroom01.jpg"> 
</a>
<p id="shop_page">Bathroom Remodel</p>
</div>      
</div>

Answer 1

您预计会发生什么？

正如我所看到的，你有两个问题取决于你想要什么。

1. 您在mobile中有两列，但需要一列。通过将媒体查询添加到移动设备中的一列来修复此问题
2. 图像会被拉伸，因为你有固定的值

Answer 2

您必须使您的网站具有响应能力，使其在所有设备中都具有吸引力。

@media(Max-width:345px){#shop_image{width:250px}}

并根据设备的宽度改变其他方面