Skip to content

Commit

Permalink
Fix right gutters in Gmail iOS+Android
Browse files Browse the repository at this point in the history 
Resolves #89 … again…
  • Loading branch information
@TedGoas
TedGoas committed Feb 6, 2018
1 parent c9d2129 commit c8d0b6a
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 24 deletions.
24 changes: 15 additions & 9 deletions cerberus-fluid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

</style>
<!-- CSS Reset : END -->
Expand Down
20 changes: 14 additions & 6 deletions cerberus-hybrid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

</style>
Expand Down
24 changes: 15 additions & 9 deletions cerberus-responsive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

</style>
<!-- CSS Reset : END -->
Expand Down

0 comments on commit c8d0b6a

Please sign in to comment.