From a7a9688962039fb5af5e073faddbc239a9479e9b Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Sun, 11 Feb 2018 18:15:23 +0200
Subject: [PATCH] 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 #16448

Closes #16449
---
 docs/app/assets/css/docs.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/app/assets/css/docs.css b/docs/app/assets/css/docs.css
index ba69449090eb..54d81ada753d 100644
--- a/docs/app/assets/css/docs.css
+++ b/docs/app/assets/css/docs.css
@@ -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;
   }
@@ -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;