媒体查询和文本

我想找到一种方法来放置我的标题和子标题，以便它们与海誓山盟对齐。但是，当我将它放在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

媒体查询和文本

回答

相关问题