미디어 쿼리 및 텍스트

나는 헤드 라인과 서브 헤드 라인을 배치하는 방법을 찾고 있으므로 서로 정렬되어 있습니다. 그러나 내가 그것을 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 선택기를 함께 사용하면 코드가 가벼워집니다.

또한 ! important을 사용하면 (나중에 코딩하는 것이 쉽지 않음)주의해야합니다. 그것을 사용하기 전에 특이성을 추가하십시오.

출처

2016-08-22 22:37:14

미디어 쿼리 및 텍스트

답변

관련 문제