HTML 이메일 모바일 반응

이메일을 작성하여 HTML로 작성했지만 모두 잘 작동하지만 텍스트 앞에 빈 부분이 있기 위해 인라인 CSS (패딩 : 0 36px 15px 140px)를 사용하는 부분이 있습니다. . 데스크톱에서는 모두보기 좋지만 모바일 기기에서 열면 왼쪽에 140px 패딩이 너무 크기 때문에 긴 선이 두 줄로 표시됩니다. 이 문제를 어떻게 해결할 수 있습니까?HTML 이메일 모바일 반응

이것은 내가 지금까지 시도한 것입니다 :

<style type="text/css"> 


    @media screen and (max-width: 525px) { 


    .smaller { 
     padding: 0px 36px 15px 100px; 
    }

<td style="padding: 0px 36px 15px 140px; font-size: 16; font-family: Helvetica; font-weight: bold;" class="smaller">

그래서 내가 작은 장치에 대한 미디어 쿼리를 선언하고있어, 그럼 나는 클래스에 이것을 적용하려고 패딩은 변경되지 않습니다. 어떻게해야합니까? 작풍은 머리에, 나 그것을 다른 곳에 두어야합니까? !important를 추가 할 수

출처

2016-10-08 dmbdnr

예. 이메일을 할 때 머리 속에 있어야 할 것은 없습니다. 모든 것을 인라인으로 넣으십시오. –

이메일 코드는 어떤 이메일 클라이언트에서 작동하지 않습니까? 그것은 _any_ 클라이언트에서 작동합니까? –

봅니다, 그것은! 중요한 지시문을 상속하여 inline-style

@media screen and (max-width: 525px) { 

    .smaller { 
     padding: 0px 36px 15px 100px !important; 
    } 
}

출처

2016-10-08 17:39:35 aldanux

아니, 작동하지 않습니다 :/ – dmbdnr

재정을 덮어 씁니다.

https://www.w3.org/wiki/Inheritance_and_cascade

.smaller { 
    padding: 0px 36px 15px 100px !important; 
}

편집 : 나는 당신이 당신의 스타일 태그를 닫는 확신, 확인 ... 나는 무승부에 느렸다 참조? (때로는 명백한 문제입니다 ... 항상 내게 일어납니다.)

출처

2016-10-08 17:44:20

@Micheal Allison 네, 닫습니다. ! 중요하지 않은 것 같습니다 – dmbdnr

다른 스타일 뒤에이 새로운 스타일을 부르시겠습니까? 주요 CSS 파일 다음과 비슷합니까? 어쩌면 오버라이드 된 것일 수도 있습니다. –

위의 예에서 볼 수 있듯이 모든 것이 내 HTML 파일에서 인라인입니다. 그래서 나는 클래스 = "더 작게"끝에 넣어서 내가한다고 생각한다 – dmbdnr

HTML 이메일 모바일 반응

답변

관련 문제