中等瀏覽器大小及以下網站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基金會）

回答

相關問題