前端网页的编码问题 - HTML/CSS 编码答案

【问题标题】：Coding issue with front web page - HTML/CSS Coded前端网页的编码问题 - HTML/CSS 编码
【发布时间】：2021-07-15 02:58:42
【问题描述】：

所以我刚刚建立了一个名为 https://services.codexcentre.com 的网站，并且能够在我的 PC 上很好地复制该页面。

但是当我让我的朋友查看该网站时，她在第一页下方告诉我 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>

【问题讨论】：

欢迎来到 Stackoverflow。请拨打tour（并获得徽章）。您的问题应包括导致问题中问题的源代码。外部链接没有帮助，并且将来可能会消失，这意味着其他人将来无法从您的好问题中受益。在help center 中心参观并阅读有关How to Ask 的一个好问题将提供您需要的所有信息。当您说在 PC 上看起来不错，但在移动设备上不行时，您并没有解释问题是什么，以及您期望它看起来如何

标签： html css wordpress

【解决方案1】：

你期望会发生什么？

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

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

【讨论】：

可能听起来很傲慢，但我希望它在移动设备上的审查与在 PC 上的审查相同。这就是为什么我从来没想过，直到我的朋友在移动设备上查看该网站时告诉我它被挤压了。

【解决方案2】：

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

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

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

【讨论】：