手机上的Html图像重叠

我第一次编写一个网页，因此我使用了一个模板。但是当我试图通过手机浏览网页时，我用的标志图片与手机的尺寸不匹配（我已经有电话线了）

我尝试创建一个名为logo的类来包装图像：

<nav class="gtco-nav" role="navigation">
    <div class="gtco-container">

        <div class="row">
            <div class="col-sm-2 col-xs-12">
                <div class="logo">

                    <img src="images/logo.png" alt="GM Arquitectes" width="400" heigth=auto>
                </div>
            </div>
            <div class="col-xs-10 text-right menu-1">
                <ul>
                    <li class="active"><a href="index.html">Inici</a></li>
                    <li><a href="sobre-nosaltres.html">Sobre nosaltres</a></li>
                    <li><a href="projectes.html">Projectes</a></li>
                    <li class="has-dropdown">
                        <a href="#">Idioma</a>
                        <ul class="dropdown">
                            <li><a href="index.html">Català</a></li>
                            <li><a href="#">Español</a></li>
                        </ul>
                    </li>
                    <li><a href="contacte.html">Contactar</a></li>
                </ul>
            </div>
        </div>

    </div>
</nav>

因为这个媒体屏幕似乎管理手机大小的元素

---

网站已经在gmarquitectes.cat上运行，因此您可以查看它。

您需要将

徽标

类作为

标记的类，而不是包装图像的

标记，因为默认情况下，您已赋予

宽度=400HTML属性

只需将此更改为：

@media screen and (max-width: 900px) {
    .logo {
        width: 50px;
        float: left;
    }
}

---

你好请编写更多的代码，这样我们就可以帮助您解决您的问题—我们可以复制这些代码。目前，我只能猜测你的CSS可能被模板覆盖了。好吧，虽然原始CSS很长，但这就是它在手机上的外观：你想缩小徽标的大小吗？我现在看到了。我无法在手机上看到HTML代码。是的，我确实希望徽标适合手机，项目字母正好位于照片下方。是的，我已经使用了此选项，但它似乎不起作用。您需要将

徽标

类作为

标记的类。目前，它仍然在

标签上。哇，真的。真的非常感谢，我才刚刚开始，对环境不太习惯。你知道为什么项目点击率这么低吗？可能是因为一些填充/边距问题

<div>
    <img class="logo" src="images/logo.png" alt="GM Arquitectes" width="400" heigth=auto>
</div>

@media screen and (max-width: 900px) {
    .logo {
        width: 50px;
        float: left;
    }
}

@media screen and (max-width: 900px) {
    .logo {
        max-width: 95%; /* you are going to want to leave some space for the hamburger button. hence the 95% value */
        float: left;
    }
}