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

Question

我是编码方面的新手（这是我的第一个网站），但我正在尝试修改我网站上的徽标。我想让它更大，更中心。我可以从桌面视图实现这一点，但它在移动设备上不起作用。

简而言之，徽标在台式机和智能手机设备上看起来都很小。所以我在 Custom 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
*/
}

在这个问题上你应该改变 style-mb.css 行 3048 文件并改变你的标志大小

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

Answer 2

将此添加到底部的 css。

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

基本上，这里发生的事情是您覆盖了您的主题所应用的一堆样式，这些样式使它在小型设备上变得很小。

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

Change Logo settings on Wordpress in a Responsive way

html

css

wordpress

responsiveness