From 98a8afde37d4cfc4c486cb67d33aa6b9ce681dd6 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
---
 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;