From 5ce4b8c7ff95a01c0a02b940479d9b6ad21cb4de Mon Sep 17 00:00:00 2001 From: UTCWebDev Date: Tue, 27 Aug 2013 16:34:26 -0400 Subject: [PATCH 1/2] Make custom max-width on row conform to Boostrap convention Bootstrap break point for tablet portrait 768 keeps the row intact, so it's not appropriate to have off-canvas elements at that width. Custom off-canvas.css should be breakpoint 767px --- examples/offcanvas/offcanvas.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/offcanvas/offcanvas.css b/examples/offcanvas/offcanvas.css index 5bb06ae6f189..8303a8630b11 100644 --- a/examples/offcanvas/offcanvas.css +++ b/examples/offcanvas/offcanvas.css @@ -14,7 +14,7 @@ footer { * Off Canvas * -------------------------------------------------- */ -@media screen and (max-width: 768px) { +@media screen and (max-width: 767px) { .row-offcanvas { position: relative; -webkit-transition: all 0.25s ease-out; From ee2e2ae0ae9991432b16ffd69eb4f22ccfb2869a Mon Sep 17 00:00:00 2001 From: UTCWebDev Date: Wed, 28 Aug 2013 15:55:45 -0400 Subject: [PATCH 2/2] Prevent X-scroll on small screens html overflow-x must be hidden to prevent accidental x-scroll on small screens. This is more apparent with touch screens, where the user often gestures diagonally instead of a true vertical gesture. --- examples/offcanvas/offcanvas.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/examples/offcanvas/offcanvas.css b/examples/offcanvas/offcanvas.css index 8303a8630b11..06aad4bda07a 100644 --- a/examples/offcanvas/offcanvas.css +++ b/examples/offcanvas/offcanvas.css @@ -2,6 +2,9 @@ * Style tweaks * -------------------------------------------------- */ +html { + overflow-x: hidden; +} body { padding-top: 70px; }