Skip to content

Commit

Permalink
fix(docs): fix @media breakpoints for small/extra small devices
Browse files Browse the repository at this point in the history
Previously, our custom styles used `@media` breakpoints for
small/extra small devices that were off-by-one from
[Bootstrap breakpoints](https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes)
(767px vs 768px). This caused the site to not be displayed correctly on
these exact sizes, which affected for example all iPad devices (whose
screens are exactly 768px wide).

This commit fixes it by making our breakpoints match those of Bootstrap.

Fixes angular#16448

Closes angular#16449
  • Loading branch information
gkalpak committed Feb 11, 2018
1 parent 32b1a0c commit a7a9688
Showing 1 changed file with 3 additions and 3 deletions.
6 changes: 3 additions & 3 deletions docs/app/assets/css/docs.css
Original file line number Diff line number Diff line change
Expand Up @@ -713,14 +713,14 @@ ul.events > li {
margin-right: 5px;
}

@media only screen and (min-width: 769px) {
@media only screen and (min-width: 768px) {
[ng-include="partialPath"].ng-hide {
display: block !important;
visibility: hidden;
}
}

@media only screen and (min-width: 769px) and (max-width: 991px) {
@media only screen and (min-width: 768px) and (max-width: 991px) {
.main-body-grid {
margin-top: 160px;
}
Expand All @@ -729,7 +729,7 @@ ul.events > li {
}
}

@media only screen and (max-width : 768px) {
@media only screen and (max-width: 767px) {
.picker, .picker select {
width: auto;
display: block;
Expand Down

0 comments on commit a7a9688

Please sign in to comment.