Question

我在编码时是新手（这是我的第一个网站），但我正在尝试修改我网站上的徽标。我想让它更大更重要。我可以从桌面视图实现此功能，但它无法在移动设备上运行。

简而言之，该设备，台式机和智能手机上的徽标看起来都很小。所以我在自定义CSS中添加此代码（在网络上找到...）：

.logo.logo1 {
   width:100%;
   text-align:center;
   margin-bottom:20px;

}

.logo.logo1 {
    width: 400px;
    height: 100px;
}

.logo.logo1 {
  position: relative;
  top: 40px;
  right: 130px;
}

有了这个，在我的桌面上，徽标看起来不错，但在我的智能手机上它很小，走得太远到屏幕的左边，部分消失了。

由于我正在接近编码，我不知道它是否依赖于潜在的徽标容器或如何使其在智能手机上响应。事实是，我做的研究越多，我就越困惑。

任何有关如何解决此问题的帮助都将非常感激：）

P.S。该网站是this one

吉奥

Answer 1

您应该在媒体部分更改移动视图的css。使用如下的东西：

@media (max-width: 767px){
/*
 your css tags
*/
}

此问题中的特殊内容您应该更改 3048 中的 style-mb.css 文件并更改徽标大小

注意：您可以在浏览器中使用移动视图在开发者工具中的桌面浏览器中测试移动视图

Answer 2

将此添加到底部的css中。

@media (max-width: 767px){
   .logo.logo1{
     max-width: 100%;
     width: 100%;
     position: static;
     top: 0;
     right: 0;
     height: auto;
   }
}

基本上，这里发生的是你覆盖了一系列主题所适用的样式，这些样式在小型设备上很小。

以响应方式更改Wordpress上的徽标设置

2 个答案: