中等浏览器大小及以下网站foobared（zurb基金会）

我的网站有一些严重的问题，当你调整它的中小观点。它在全屏和移动视图方面看起来不错，但是当你将其缩小到中等和低于浏览器时，它在浏览器中存在一些严重问题。我已经使用过基础，但也掺杂了一些非基础代码，我认为这些代码导致了一些问题，例如容器。我也怀疑顶级导航栏有问题，因为它也会缩小视图。有很多代码可以看，但我会在这里发布一些片段以及链接到主站点，以便您可以查看完整的代码。中等浏览器大小及以下网站foobared（zurb基金会）

下面是一些最上面一栏的，也是我有一个容器，这是不是可能会扔东西，离网的一部分，以及为我编写一些CSS的，如果删除抛出其关闭一个奇怪的头元素以及。基本上，我的代码有点乱，而且我会尽最大努力清理它，我可以一旦找出调整浏览器大小时造成的大量混乱情况。（PS。看到代码和css的其余部分，请访问www.omegadesignla.com和检查元素，或者问我要粘贴的特定部分，谢谢！）

<nav class="top-bar" data-topbar> 
      <ul class="title-area"> 
      <li class="name"> 

       <span><a href="index.html"><img class="logo" src="img/primarylogo.png"></a><span> 
      </li> 
      <li class="toggle-topbar menu-icon"> 
       <a href="#">Menu</a> 
      </li> 
      </ul> 

      <section class="top-bar-section"> 

      <ul class="right"> 
       <li><a href="#about">About us</a></li> 
       <li><a href="#" data-reveal-id="myModal">Contact us</a></li> 

       <li class="has-dropdown"> 
        <a href="#">Services</a> 
        <ul class="dropdown"> 
        <li><a href="services.html#printing">Print Media</a></li> 
        <li><a href="services.html">Web Development</a></li> 
        <li><a href="services.html">Promotional Items</a></li> 
        <!-- <li class="active"><a href="#">Active link in dropdown</a></li> --> 
        </ul> 
       </li> 
      </ul> 
      </section> 
     </nav>  
    <div class="container"> 
    <header> 

     <div class="row"> 
     <div class="large-3 medium-3 small-6 small-centered columns"> <!-- large centered --> 
     <a id="topbutton" href="#" class="button large radius button">Take the tour!</a> 

     </div> 



     </header>

来源

2014-10-27 Omegaman

从萤火虫调试你的网站我看到左上角的logo是一个宽度为720px的png。虽然您的课堂.logo宽度：40％，它使.title区域720px宽度打破布局。

尝试以下补充的CSS：

.title-area { 
    max-width: 40%; //or whatever you need for your layout. px will work there, too 
} 
.title-area .logo { 
    width: 100%; 
    height: auto; 
}

我还rewize的PNG到所需的大小，以节省一些KB的下载。

我希望有帮助。

来源

2014-10-27 08:31:55 wmk

感谢您的回应，我只是尝试过，但没有成功。它仍然有重大缺陷。还有其他建议吗？ – Omegaman 2014-10-27 19:23:57

我在媒体查询下添加了这段代码，但它帮助到了，但是当它下降到700px以下时，它仍然混乱起来。 – Omegaman 2014-10-28 05:16:21

这是使.title区域增长的徽标图像。如果您调整图像的尺寸，它应该可以正常工作。顺便说一句：你可以在浏览器中使用萤火虫玩弄CSS。这在调试css时有很大帮助 – wmk 2014-10-28 07:50:59

中等浏览器大小及以下网站foobared（zurb基金会）

回答

相关问题