diff --git a/css/styles.css b/css/styles.css index f00e433..5452479 100644 --- a/css/styles.css +++ b/css/styles.css @@ -12,6 +12,7 @@ header { margin: 0; position: sticky; top: 0; + display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; @@ -19,7 +20,9 @@ header { z-index: 10; /* Adjust the z-index as needed */ } main { + -webkit-flex: 1; flex: 1; + display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-around; @@ -27,8 +30,11 @@ main { padding: 20px; } .flex-column { + -webkit-flex: 100%; flex: 100%; + -webkit-flex-direction: row; flex-direction: column; + display: -webkit-flex; display: flex; align-items: center; color: var(--text-color); @@ -39,24 +45,32 @@ main { border-bottom: 3px solid rgb(230, 230, 230); } .flex-row { + -webkit-flex: 100%; flex: 100%; + -webkit-flex-direction: row; flex-direction: row; + display: -webkit-flex; display: flex; color: var(--text-color); margin: 10px; text-align: center; border-radius: 5px; + -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-evenly; } .flex-container { margin: 10px; padding: 20px; + display: -webkit-flex; display: flex; + -webkit-flex-wrap: wrap; flex-wrap: wrap; + -webkit-flex-direction: column; flex-direction: column; justify-content: space-evenly; align-items: center; + -webkit-flex: 1 1 0; flex: 1 1 0; } .bg-one { @@ -70,8 +84,11 @@ footer { background-color: gray; text-align: center; padding: 1rem; + -webkit-flex: 1; flex: 1; + display: -webkit-flex; display: flex; + -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-evenly; } @@ -127,7 +144,9 @@ a:hover:not(nav a) { box-sizing: border-box; color: #121212; cursor: pointer; + display: -webkit-flex; display: flex; + -webkit-flex: 0 0 auto; flex: 0 0 auto; font-family: Inter, sans-serif; font-size: 1.2rem; @@ -157,7 +176,9 @@ a:hover:not(nav a) { box-sizing: border-box; color: white; cursor: pointer; + display: -webkit-flex; display: flex; + -webkit-flex: 0 0 auto; flex: 0 0 auto; font-family: Inter, sans-serif; font-size: 1.2rem; @@ -237,10 +258,13 @@ a:hover:not(nav a) { /* Menu */ .menu { margin: 0 auto; + display: -webkit-flex; display: flex; justify-content: center; align-content: center; + -webkit-flex-direction: row; flex-direction: row; + -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 100%; z-index: 100; @@ -248,10 +272,13 @@ a:hover:not(nav a) { nav { background: black; + display: -webkit-flex; display: flex; align-content: space-around; justify-content: center; + -webkit-flex: 1; flex: 1; + -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 100%; z-index: 100; @@ -261,7 +288,9 @@ nav ul { padding: 0; margin: 0; list-style: none; + display: -webkit-flex; display: flex; + -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; align-content: center; @@ -269,10 +298,12 @@ nav ul { } nav ul li { + display: -webkit-flex; display: flex; } nav a { + display: -webkit-flex; display: flex; padding: 0 10px; color: #fff; @@ -301,7 +332,9 @@ nav ul ul { /* Display Dropdowns on Hover */ nav ul li:hover > ul { + display: -webkit-flex; display: flex; + -webkit-flex-direction: column; flex-direction: column; justify-content: center; align-content: center; @@ -310,6 +343,7 @@ nav ul li:hover > ul { /* First Tier Dropdown */ nav ul ul li { + display: -webkit-flex; display: flex; width: 100%; float: none; @@ -335,6 +369,7 @@ input[type="checkbox"] { } .menu-items { + display: -webkit-flex; display: flex; } @@ -343,6 +378,7 @@ input[type="checkbox"] { } input:checked + .drop + .menu-items { + display: -webkit-flex; display: flex; } @@ -350,6 +386,7 @@ input:checked + .drop + .menu-items { position: fixed; bottom: 20px; right: 20px; + display: -webkit-flex; display: flex; align-items: center; justify-content: center; @@ -379,6 +416,7 @@ input:checked + .drop + .menu-items { /* Display All Items in Full-width Column */ nav ul li { + display: -webkit-flex; display: flex; width: 100%; text-align: center; @@ -397,6 +435,7 @@ input:checked + .drop + .menu-items { } .drop { cursor: pointer; + display: -webkit-flex; display: flex; justify-content: center; align-content: center; @@ -412,6 +451,7 @@ input:checked + .drop + .menu-items { } input:checked + .drop + .menu-items { + display: -webkit-flex; display: flex; } }