From 75ebf7c5bd48e64d58aef9892ce6b6fbf69e5f1a Mon Sep 17 00:00:00 2001 From: Norwin Date: Tue, 17 Nov 2020 05:33:19 +0000 Subject: fix media query edge case (#13546) * fix media query edge case was failing for 768px width before * code review * define responsive breakpoints as less variables * add missing variables.less * rename variables, drop screen constraints * fix less import * Apply suggestions from code review Co-authored-by: silverwind * code review altough it doesnt matter, LESS lazy evals variables Co-authored-by: zeripath Co-authored-by: silverwind Co-authored-by: techknowlogick --- web_src/less/_home.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'web_src/less/_home.less') diff --git a/web_src/less/_home.less b/web_src/less/_home.less index 707c873279..fb31bedfa9 100644 --- a/web_src/less/_home.less +++ b/web_src/less/_home.less @@ -4,7 +4,7 @@ } .hero { - @media only screen and (max-width: 767px) { + @media @mediaSm { h1 { font-size: 3.5em; } @@ -14,7 +14,7 @@ } } - @media only screen and (min-width: 768px) { + @media @mediaMdAndUp { h1 { font-size: 5.5em; } @@ -52,7 +52,7 @@ footer { .ui.container .left, .ui.container .right { - @media only screen and (max-width: 880px) { + @media (max-width: 880px) { display: block; text-align: center; float: none; -- cgit v1.2.3