Question

我正在为我的叔叔做一个网站，我有一个小问题。当我在手机上访问它时，徽标，网站标题和导航栏都在一起。

这就是这里的样子。

如何在CSS中更改此内容？我看了一遍，但没有找到任何答案。我试过改变style.css上的@Media CSS部分

Answer 1

您可以尝试：

margin: 20px;

这应该在徽标和标题之间创造一个间隙应该更远。此外，如果您可以在帖子中包含一些非常棒的代码。

Answer 2

由于该网站目前处于停机状态且没有代码，所以我至少可以帮助您解决如何应用媒体查询的问题。

@media (max-width: 480px) {
   .<yourimg>: <your styling>;
}

这将允许在屏幕上应用任何小于480px宽的样式。显然，您可以放入所需的宽度。这只是一个例子:)

您可以阅读有关媒体查询的所有信息here

希望这有点帮助：）

// Marc Hjorth

Answer 3

我用这个：

<div class="col m12 s12 l8 offset-l2"> </div>

根据查看它的屏幕大小设置div的宽度，从而可以轻松设计移动网站，而无需设计两个单独的网站。

例如，我在某个区域周围创建一个容器，将其设置为带有div的行，然后使用根据屏幕大小更改的列

<div class="sections-container">
 <section id="our-vision" class="section">
  <div class="row">
   <a name="our-vision"></a>
     <div class="col m12 s12 l8 offset-l2">

     </div>
  </div>
 </section>
</div>

Answer 4

我快速浏览了一下网站。导致导航向下的空侧栏存在问题。

带有以下ID的侧边栏： ID =＆＃34;边栏报头＆＃34; 如果您不需要，您应该尝试禁用主题中的侧边栏。或者您可以在样式表中添加一个简单的CSS规则，以便不显示它：

#sidebar-header { display: none; }

要移动移动菜单，您可以在第2795行的style.css中编辑此样式规则：

@screen and (max-width: 760) {
 ...
#access {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 3;
   width: 100%;
   padding: 0;
   background: none;
   box-shadow: none;
}
...
}

在那里编辑顶部和左侧属性（添加一些像素值，例如：top：70px;例如）

我希望这会有所帮助。

调整徽标和文本移动大小

4 个答案: