Disappointed but not Discouraged

My First Collaborative Project

Wireframe of the webpage

Working with the Grid

Sketch of the Grid Layout
<body>
<div class="grid-container">
<div class="header"></div>
<div class="question"></div>
<div class="options"></div>
<div class="details"></div>
<div class="adverts"></div>
<div class="footer"></div>
</div>
</body>
.grid-container {
display: grid;
grid-template-areas: "header header header"
"question details adverts"
"options details adverts"
"footer footer footer";
grid-template-columns: auto auto auto;
grid-template-rows: 45vh auto auto auto;
min-height: 100%;
}
.header {grid-area: header;}
.question {grid-area: question;}
.options {grid-area: options;}
.details {grid-area: details;}
.adverts {grid-area: adverts;}
.footer {grid-area: footer;}
Desktop view
@media only screen and (max-width: 650px) {
.grid-container {
grid-template-areas: "header"
"details"
"question"
"options"
"adverts"
"footer";
grid-template-columns: 100%;
grid-template-rows: 35vh auto auto auto auto auto;
min-height: 100vh;
}
}
Mobile View
@media (min-width: 650px) and (max-width: 900px) {
.grid-container {
grid-template-areas: "header header"
"question options"
"details adverts"
"footer footer";
grid-template-columns: auto auto;
grid-template-rows: 40vh auto auto auto;
min-height: 100vh;
}
}
Tablet View

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ola Eleyinmi

Ola Eleyinmi

11 Followers

Software Developer | Lazy Hardworker | Retired Football Fanatic | Lover of Good Music