@media screen and (orientation: landscape){ @media screen and (max-width: 1200px){ body{ background: rgb(0, 27, 45); } .contentBlock{ padding: 0; } .button{ padding: 3px 0; } .mobileMenuSelector{ display: flex; color: rgb(240, 252, 255); z-index: 10; } .strandHead{ color: white; position: fixed; top: 5px; left: 25px; right: 0; margin: 0; text-align: center; font-size: 20px; } .strandTitle{ margin: 0; } .choosable{ background: rgb(201, 201, 201); color: black; } /* HOME */ #homeStrand{ flex-direction: row; padding: 0; align-items: flex-end; } #graphCard{ display: none; } #inventoryCheckCard{ display: none; } .flexRow{ height: 80%; } .flexRow:nth-child(3){ flex-grow: 2; } .card{ background: white; } #popularIngredientsCard{ max-height: 100%; padding-bottom: 5px; } /* INGREDIENTS */ #ingredientsStrand{ padding-bottom: 10px; justify-content: flex-end; } #categoryList{ height: 70%; } .categoryDiv{ margin: 3px; } .categoryDiv > div:first-of-type p{ padding: 5px 10px; } .categoryDiv > div:first-of-type button{ padding: 0; height: initial; width: initial; display: flex; align-items: center; } .ingredientsDiv{ width: 90%; } /* RECIPE BOOK */ #recipeBookStrand{ padding-bottom: 10px; justify-content: flex-end; } #recipeList{ height: 70%; } /* ANALYTICS */ #analyticsStrand{ padding-bottom: 10px; justify-content: space-between; } #analyticsStrand .strandHead{ position: static; height: unset; flex-wrap: wrap; } #analyticsStrand .strandTitle{ width: 100%; margin-top: -13px; margin-left: 10px; } .switch{ margin-top: -15px; font-size: 15px; } #analyticsStrand .dateRange{ margin-top: -55px; } .analDateRange{ display: none; } .analContent{ padding: 0; height: 70%; } .itemsList{ width: 23%; } .analData{ width: 73% } .dataRow{ display: none; } .modebar-container{ display: none; } #analRecipeContent{ height: 70%; } #newOrderBtn{ display: none; } /* ORDERS */ #ordersStrand{ justify-content: flex-end; } #ordersStrand .buttonBox{ margin: 0; } #orderList{ height: 70%; } /* TRANSACTIONS */ #transactionsStrand{ justify-content: flex-end; } #transactionsStrand .buttonBox{ margin: 0; } #transactionsList{ height: 70%; } /* SIDEBARS */ .sidebar{ width: 100vw; color: white; padding: 3px 15px; } .sidebarIconButtons{ display: none; } /* MENU */ #menu{ display: none; width: 100vw; height: 100vh; padding: 0; flex-wrap: wrap; flex-direction: row; justify-content: space-around; } .menuShifter{ display: none; } .menuHead{ justify-content: center; padding: 0; margin-bottom: 0; height: 50px; } .menuHead a{ width: initial; justify-content: center; } .menuLogo{ max-height: 50px; max-width: 50px; } .menuButton{ width: 40%; justify-content: center; background: rgb(201, 201, 201); color: black; margin: 15px; padding-left: 0; box-shadow: 0 0 5px white; height: 10vh; } /* INGREDIENT DETAILS */ #ingredientDetails > *{ margin: 0; } #recipeListLabel, #subIngredientList{ display: none; } /* FILTER ORDERS */ #orderFilter > *{ margin: 0; } #orderFilter h1{ padding: 0; } #filterOrderDateRange, #orderFilter .lineBorder{ display: none; } .dateRange{ padding-bottom: 3px; } #orderFilterSubmit{ margin-top: 3px; } /* ORDER DETAILS */ #orderIngredients{ display: none; } /* TRANSACTION DETAILS */ #transactionRecipesLabel, .transactionRecipes, #transactionDetails .lineBorder{ display: none; } /* FILTER TRANSACTIONS */ #transactionFilter > *{ margin: 0; } #transactionFilterDateLabel{ display: none; } #transactionFilter .dateRange{ margin-bottom: 5px; } #transFilterSubmit{ margin-top: 5px; } } }