diff --git a/cerberus-fluid.html b/cerberus-fluid.html index 6bfb6094..3a986958 100644 --- a/cerberus-fluid.html +++ b/cerberus-fluid.html @@ -105,19 +105,25 @@ /* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */ /* Create one of these media queries for each additional viewport size you'd like to fix */ - /* Thanks to Eric Lepetit (@ericlepetitsf) for help troubleshooting */ - @media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */ + + /* iPhone 4, 4S, 5, 5S, 5C, and 5SE */ + @media only screen and (min-device-width: 320px) and (max-device-width: 374px) { + .email-container { + min-width: 320px !important; + } + } + /* iPhone 6, 6S, 7, 8, and X */ + @media only screen and (min-device-width: 375px) and (max-device-width: 413px) { .email-container { min-width: 375px !important; } } - - @media screen and (max-width: 480px) { - /* What it does: Forces Gmail app to display email full width */ - div > u ~ div .gmail { - min-width: 100vw; - } - } + /* iPhone 6+, 7+, and 8+ */ + @media only screen and (min-device-width: 414px) { + .email-container { + min-width: 414px !important; + } + } diff --git a/cerberus-hybrid.html b/cerberus-hybrid.html index b201928d..cdde2440 100644 --- a/cerberus-hybrid.html +++ b/cerberus-hybrid.html @@ -105,16 +105,24 @@ /* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */ /* Create one of these media queries for each additional viewport size you'd like to fix */ - /* Thanks to Eric Lepetit @ericlepetitsf) for help troubleshooting */ - @media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */ + + /* iPhone 4, 4S, 5, 5S, 5C, and 5SE */ + @media only screen and (min-device-width: 320px) and (max-device-width: 374px) { + .email-container { + min-width: 320px !important; + } + } + /* iPhone 6, 6S, 7, 8, and X */ + @media only screen and (min-device-width: 375px) and (max-device-width: 413px) { .email-container { min-width: 375px !important; } } - - /* What it does: Forces Gmail app to display email full width */ - div > u ~ div .gmail { - min-width: 100vw; + /* iPhone 6+, 7+, and 8+ */ + @media only screen and (min-device-width: 414px) { + .email-container { + min-width: 414px !important; + } } diff --git a/cerberus-responsive.html b/cerberus-responsive.html index 8e9db617..04df9df8 100644 --- a/cerberus-responsive.html +++ b/cerberus-responsive.html @@ -105,19 +105,25 @@ /* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */ /* Create one of these media queries for each additional viewport size you'd like to fix */ - /* Thanks to Eric Lepetit (@ericlepetitsf) for help troubleshooting */ - @media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */ + + /* iPhone 4, 4S, 5, 5S, 5C, and 5SE */ + @media only screen and (min-device-width: 320px) and (max-device-width: 374px) { + .email-container { + min-width: 320px !important; + } + } + /* iPhone 6, 6S, 7, 8, and X */ + @media only screen and (min-device-width: 375px) and (max-device-width: 413px) { .email-container { min-width: 375px !important; } } - - @media screen and (max-width: 480px) { - /* What it does: Forces Gmail app to display email full width */ - div > u ~ div .gmail { - min-width: 100vw; - } - } + /* iPhone 6+, 7+, and 8+ */ + @media only screen and (min-device-width: 414px) { + .email-container { + min-width: 414px !important; + } + }