媒體查詢不採取像它應該的格式

我在我的網站設計一個容器，出於某種原因，每當我的媒體查詢發生時，我的代碼不會像它應該結果。每一處我放置代碼的地方（jsfddle，snippet），但現場底部的箭頭都在藍色容器內。媒體查詢不採取像它應該的格式

爲什麼藍色的向下箭頭需要在代碼段中，而不是我的網站？

請到這裏：click here

.arrow_box { 
 
\t position: relative; 
 
\t background: #88b7d5; 
 
\t border: 4px solid #c2e1f5; 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
.arrow_box:after, .arrow_box:before { 
 
\t top: 100%; 
 
\t left: 50%; 
 
\t border: solid transparent; 
 
\t content: " "; 
 
\t height: 0; 
 
\t width: 0; 
 
\t position: absolute; 
 
\t pointer-events: none; 
 
} 
 

 
.arrow_box:after { 
 
\t border-color: rgba(136, 183, 213, 0); 
 
\t border-top-color: #88b7d5; 
 
\t border-width: 30px; 
 
\t margin-left: -30px; 
 
} 
 
.arrow_box:before { 
 
\t border-color: rgba(194, 225, 245, 0); 
 
\t border-top-color: #c2e1f5; 
 
\t border-width: 36px; 
 
\t margin-left: -36px; 
 
} 
 
#project-content-wrap { 
 
    margin: 10% 5%; 
 
} 
 
#project-box-title1 { 
 
    font-size: 1.1em; 
 
    color: #FFF; 
 
} 
 
#project-box-title2 { 
 
    font-size: 3.2em; 
 
    color: #FFF; 
 
    margin-top: 20px; 
 
} 
 
#project-box-description { 
 
    font-size: 1.1em; 
 
    color: #303030; 
 
    margin-top: 40px; 
 
    line-height: 1.6em; 
 
}

<div class="arrow_box"> 
 
    <div id="project-content-wrap"> 
 
    <div id="project-box-title1">KICK START YOUR</div> 
 
    <div id="project-box-title2">PROJECT</div> 
 
    <div id="project-box-description">We enjoy partnering with established brands from all over the globe. To begin the process please provide us with a high level overview and submit our form. We will review and respond promptly.</div> 
 
    </div> 
 
</div>

來源

2016-01-14 Paul

嘗試上傳截圖。這看起來很好嗎？順便說一句，你在哪裏媒體查詢？ –

@Lars我上傳了我所看到的片段。我的媒體查詢是在我的實際代碼中。 – Paul

它在你的網址中的Chrome和FF中看起來不錯，在這裏看起來很好。我能想到的唯一可能就是，比如說你的邊距和填充重置，或者相反。 –

在討論-project.css的margin-top的93行設置爲-26px。刪除它，它應該像你想要的。

來源

2016-01-14 16:29:03

完美無瑕。這是在我的主要桌面視圖，所以它有一個目的，但我進入我的媒體查詢在'.arrow_box：之前{'部分並做了'margin-top：0;'謝謝！ – Paul

啊，當然，忘了提到這一點。很高興它是固定的 –

在媒體查詢部分，只需在您的.arrow_box上添加一個0px left margin即可。

.arrow_box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-top-color: #c2e1f5; 
    border-width: 36px; 
    margin-left: -36px; 
    margin-top: 0px; 
}

的問題很簡單：它是保持你的箭頭時，屏幕大小> 640像素的初始margin-left:-36px。在Chrome，Firefox，IE和Safari下測試

來源

2016-01-14 16:31:41

媒體查詢不採取像它應該的格式

回答

相關問題