Skip to content

Commit 2b6cfab

Browse files
gkalpakNarretz
authored andcommitted
fix(docs): fix @media breakpoints for small/extra small devices
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
1 parent 67d3387 commit 2b6cfab

File tree

1 file changed

+3
-3
lines changed

1 file changed

+3
-3
lines changed

docs/app/assets/css/docs.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -713,14 +713,14 @@ ul.events > li {
713713
margin-right: 5px;
714714
}
715715

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

723-
@media only screen and (min-width: 769px) and (max-width: 991px) {
723+
@media only screen and (min-width: 768px) and (max-width: 991px) {
724724
.main-body-grid {
725725
margin-top: 160px;
726726
}
@@ -729,7 +729,7 @@ ul.events > li {
729729
}
730730
}
731731

732-
@media only screen and (max-width : 768px) {
732+
@media only screen and (max-width: 767px) {
733733
.picker, .picker select {
734734
width: auto;
735735
display: block;

0 commit comments

Comments
 (0)