From 574b7d33df8f1076e2878232176bb004c97e2015 Mon Sep 17 00:00:00 2001 From: Gerome Matilla Date: Thu, 4 Jun 2020 12:47:58 +0800 Subject: [PATCH] dock responsiveness --- css/dock.css | 155 +++++++++++++++++++++++++-------------------------- 1 file changed, 77 insertions(+), 78 deletions(-) diff --git a/css/dock.css b/css/dock.css index 6a82599..5ee6e3e 100644 --- a/css/dock.css +++ b/css/dock.css @@ -30,34 +30,32 @@ z-index: 1 !important; } - - /*Translate dock to left side if width <= 580 and height >= 540*/ @media screen and (max-width: 580px) and (min-height: 540px) { .dockContainer { - display: inline-block; + display: inline-block !important; opacity: 1; - position: relative; - margin:0 auto; + position: relative !important; + margin:0 auto !important; - top: 50%; - left: 0; - bottom: 0; - right: 0; + top: 50% !important; + left: 0 !important; + bottom: 0 !important; + right: 0 !important; - -webkit-transform: translateY(-50%); - transition: opacity var(--transition-speed); + -webkit-transform: translateY(-50%) !important; + transition: opacity var(--transition-speed) !important; } #dock { - display: inline-block; - width: auto; - height: auto; - margin: 5px; - transform: scale(0.85); - transition: transform var(--transition-speed); + display: inline-block !important; + width: auto !important; + height: auto !important; + margin: 5px !important; + transform: scale(0.85) !important; + transition: transform var(--transition-speed) !important; } } @@ -67,28 +65,28 @@ @media screen and (max-width: 579px) and (max-height: 539px) { .dockContainer { - position: absolute; - background: transparent; - z-index: 5; - margin: 0 auto; - bottom: 0; + position: absolute !important; + background: transparent !important; + z-index: 5 !important; + margin: 0 auto !important; + bottom: 0 !important; /*On bottom, center horizontally*/ - left: 50%; - -ms-transform: translateX(-50%); - transform: translateX(-50%); + left: 50% !important; + -ms-transform: translateX(-50%) !important; + transform: translateX(-50%) !important; /*Add transition*/ - transition: opacity var(--transition-speed); + transition: opacity var(--transition-speed) !important; } #dock { - display: flex; - width: auto; - height: auto; - margin: 5px; - transform: scale(0.85); - transition: transform var(--transition-speed); + display: flex !important; + width: auto !important; + height: auto !important; + margin: 5px !important; + transform: scale(0.85) !important; + transition: transform var(--transition-speed) !important; } } @@ -97,28 +95,28 @@ @media screen and (max-width: 490px) and (max-height: 539px) { .dockContainer { - position: absolute; - background: transparent; - z-index: 5; - margin: 0 auto; - bottom: 0; + position: absolute !important; + background: transparent !important; + z-index: 5 !important; + margin: 0 auto !important; + bottom: 0 !important; /*On bottom, center horizontally*/ - left: 50%; - -ms-transform: translateX(-50%); - transform: translateX(-50%); + left: 50% !important; + -ms-transform: translateX(-50%) !important; + transform: translateX(-50%) !important; /*Add transition*/ - transition: opacity var(--transition-speed); + transition: opacity var(--transition-speed) !important; } #dock { - display: flex; - width: auto; - height: auto; - margin: 5px; - transform: scale(0.65); - transition: transform var(--transition-speed); + display: flex !important; + width: auto !important; + height: auto !important; + margin: 5px !important; + transform: scale(0.65) !important; + transition: transform var(--transition-speed) !important; } } @@ -127,28 +125,28 @@ @media screen and (max-width: 375px) and (min-width: 320px) and (max-height: 539px) { .dockContainer { - position: absolute; - background: transparent; - z-index: 5; - margin: 0 auto; - bottom: 0; + position: absolute !important; + background: transparent !important; + z-index: 5 !important; + margin: 0 auto !important; + bottom: 0 !important; /*On bottom, center horizontally*/ - left: 50%; - -ms-transform: translateX(-50%); - transform: translateX(-50%); + left: 50% !important; + -ms-transform: translateX(-50%) !important; + transform: translateX(-50%) !important; /*Add transition*/ - transition: opacity var(--transition-speed); + transition: opacity var(--transition-speed) !important; } #dock { - display: flex; - width: auto; - height: auto; - margin: 5px; - transform: scale(0.55); - transition: transform var(--transition-speed); + display: flex !important; + width: auto !important; + height: auto !important; + margin: 5px !important; + transform: scale(0.55) !important; + transition: transform var(--transition-speed) !important; } } @@ -157,29 +155,30 @@ @media screen and (max-width: 319px) and (max-height: 539px) { .dockContainer { - position: absolute; - background: transparent; - z-index: 5; - margin: 0 auto; - bottom: 0; + position: absolute !important; + background: transparent !important; + z-index: 5 !important; + margin: 0 auto !important; + bottom: 0 !important; /*On bottom, center horizontally*/ - left: 50%; - -ms-transform: translateX(-50%); - transform: translateX(-50%); + left: 50% !important; + -ms-transform: translateX(-50%) !important; + transform: translateX(-50%) !important; /*Add transition*/ - transition: opacity var(--transition-speed); + transition: opacity var(--transition-speed) !important; } #dock { - display: flex; - width: auto; - height: auto; - opacity: 0; - margin: 5px; - transform: scale(0.0); - transition: transform var(--transition-speed), opacity var(--transition-speed); + display: flex !important; + width: auto !important; + height: auto !important; + opacity: 0 !important; + margin: 5px !important; + transform: scale(0.0) !important; + transition: transform var(--transition-speed), + opacity var(--transition-speed) !important; } }