Standard smallest screen is 600px (#520)

For devices that have a screen size so small they have to use the `max-width` property in CSS, the standard of a screen-size that has to be used here is `phones 600px and smaller`, not `900px`, which would have to use the `min-width` property instead, that would mean a widescreen size, because `min-width` means `a screen size of 900px, or more`, including desktops.
Plume-org · Apr 8, 2019 · de296b6 · de296b6
1 parent d7de09a
commit de296b6
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/static/css/_header.scss b/static/css/_header.scss
@@ -88,7 +88,7 @@ header {
 }
 
 // Only enable label animations on normal screens
-@media screen and (min-width: 900px) {
+@media screen and (min-width: 600px) {
  	header nav a {
  	  i {
    		transition: all 0.2s ease;

diff --git a/static/css/main.scss b/static/css/main.scss
@@ -18,7 +18,7 @@ html {
 @import 'forms';
 
 /// Small screens
-@media screen and (max-width: 900px) {
+@media screen and (max-width: 600px) {
   @keyframes menuOpening {
     from {
       transform: scaleX(0);