diff --git a/src/components/RequestWine.vue b/src/components/RequestWine.vue index 90f84e4..ceb8a96 100644 --- a/src/components/RequestWine.vue +++ b/src/components/RequestWine.vue @@ -101,6 +101,12 @@ export default { @import "./src/styles/global"; @import "./src/styles/variables"; + +h1{ + text-align: center; +} + + .main-container{ margin: auto; max-width: 1200px; @@ -115,57 +121,23 @@ input[type="text"] { max-width: 90%; } + .search-container{ margin: 1rem; - margin-left: 2rem; -} - -@media #{$mobileOnly}{ - h2{ - font-size: 1em; - max-width: 80%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis - } -} - -@media #{$tabletOnly}{ - h2{ - font-size: 1.2em; - } -} -@media #{$desktopAndUp}{ - h2{ - font-size: 1.6em; - } } .search-section{ display: grid; grid: 1fr / 1fr .2fr; - grid-template-areas: "search-area button"; @media #{$mobileOnly}{ .vin-button{ display: none; } .search-input-field{ - // grid-row: 1 / -1; - width: 100%; - max-width: 100%; + grid-column: 1 / -1; } } - - @media #{$tabletAndUp}{ - .search-input-field{ - grid-area: search-area; - } - .vin-button{ - grid-area: button; - } - } - } .single-result{ @@ -199,7 +171,16 @@ input[type="text"] { grid-area: button1; } + h2{ + font-size: 1em; + max-width: 80%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis + } + } + .wine-image { height: 100px; @@ -239,11 +220,18 @@ input[type="text"] { .vin-button{ grid-area: button2; } -} - - -h1{ - text-align: center; + + @media #{$tabletOnly}{ + h2{ + font-size: 1.2em; + } + } + + @media #{$desktopAndUp}{ + h2{ + font-size: 1.6em; + } + } }