媒體查詢和文本

我想找到一種方法來放置我的標題和子標題，以便它們與海誓山盟對齊。但是，當我將它放在1臺設備上時，文字會在另一臺設備上跳來跳去。這意味着我只是在圈子裏走動。媒體查詢和文本

有沒有一種方法可以讓我在所有移動設備上的邊距應該是fx：20px左邊，或者你們是怎麼做的？

HTML

<div class="max-container-fluid"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        @CurrentPage.GetGridHtml("Grid") 
       </div> 
      </div> 
     </div>

CSS

.header-text h1 { 
    font-weight: 900; 
    font-size: 40px; 
    line-height: 1; 
    text-transform: uppercase; 
    color: #fff; 
    padding-top: 160px; 
} 




.header-text h2 { 
    font-size: 20px !important; 
    margin-bottom: 25px; 
    font-weight: 900; 
    color: #fff; 

} 

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
    .header-text h2 { 
    font-size: 20px !important; 
    margin-left: 20px; 
    font-weight: 900; 

}

來源

2016-08-22 McDuck4

粘貼您的整個代碼。可能這是一個寬度問題。嘗試在斷點上設置寬度。還要確保包含視口元標記。 –

事實上，您只能在媒體設備上爲h2設置左邊距。一定要在上面聲明你的利潤率。誰知道其他元素對h1的影響 - 可能是寬度，邊距，填充等問題。 – MatthewS

謝謝您的回答。我所擁有的CSS只是這個。內容和網格來自Umbraco，所以沒有更多的HTML代碼。 – McDuck4

試試這個：

/* Smartphones (portrait and landscape) ----------- */ 
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
     .header-text h2, .header-text h1 { 
      margin-left: 20px; 
     } 
    }

你不需要，如果他們保持不變重複所有其他值 - 你還會注意到你可以合作mbine選擇器在一起，這使得你的代碼更輕。

另外，要小心使用！重要的（它可以使未來的編碼真的混亂）。嘗試添加特異性，然後再使用它。

來源

2016-08-22 22:37:14

媒體查詢和文本

回答

相關問題