桌面上的网站标题小部件弄乱了移动标题答案

【问题标题】：Website header widget on desktop has messed up mobile header桌面上的网站标题小部件弄乱了移动标题
【发布时间】：2017-07-27 13:47:10
【问题描述】：

我最近在我的网站标题中添加了一个桌面模式小部件。我努力让这个小部件位于同一行并位于徽标的右侧，但我最终得到了它。在此过程中，我似乎弄乱了标题在移动设备上的外观（例如，请参阅 twoguysplayingzelda.com）。由于我 65% 的收视率是通过移动设备进行的，因此我想解决此问题，但尚未弄清楚如何解决。我希望徽标居中，完全可见，左侧的菜单图标（在我进行更改之前它曾经是）。我知道我需要在 style.css 的响应部分中添加编码。下面是我目前在 CSS 中的标题（桌面部分）。在开始我的网站之前，我对 CSS 和 HTML 一无所知，所以我还是个菜鸟。感谢您的帮助

div#header-widget-area {
  float: right;
}

.header { 
  padding-top: 10px;
  padding-bottom: 60px;
  color: #01B3D9;
}

.header .cover { 
  background: rgba(29,29,29,0.0); 
}

.header-inner {
  position: relative; 
}

.header .blog-logo { 
  text-align: left; 
}

.header .logo { 
  display: inline; 
  float: left;
}

.header .logo img {
  max-height: 50px;
  width:auto;
}

【问题讨论】：

标签： css mobile

【解决方案1】：

菜单图标被徽标推到右侧，因为它们都有float: left。

尝试从.logo 中删除float: left，并将display: inline-block 添加到.blog-logo。这应该可以解决您的两个问题。

【讨论】：

其中一些确实有效。谢谢！现在，我在桌面模式的标题部分中遇到了额外填充的问题。如何减小标题大小。我在几个不同的地方尝试了 padding-top 和 padding-bottom，但没有成功。最后，我不想在移动标题中显示小部件。我有下面的代码曾经可以工作，但现在不行了。 @media (max-width: 600px) div#header-widget-area { display: none; }
@TwoGuysPlayingZelda 我查看了您的网站，似乎您已删除了该小部件。你也解决了填充问题吗？
在搞砸了我的网站设计之后，我最终暂时删除了这个小部件。有些东西可以在一个视图（桌面）中工作，但它不能在另一个视图（移动）中工作。我将解决我之前的一些其他优先事项并回到这个问题上。我一定会使用您的信息。感谢您的宝贵时间！
@TwoGuysPlayingZelda 如果我的回答适用于您在原始问题中提出的问题，您能接受吗？祝你的网站好运！