Skip to content

Instantly share code, notes, and snippets.

@gate5th gate5th/App.css
Created Sep 12, 2018

Embed
What would you like to do?
oldschoolshuffle
/*App.css*/
.App {
margin: auto;
padding-left: 50px;
padding-right: 50px;
text-align: center;
display: grid; /* Sets the element to grid mode */
grid-template-columns: 2fr 1fr; /* We want 2 columns, with the first column 2/3 of the space */
grid-column-gap: 20px; /* give us 20px margin between columns */
grid-template-rows: 1fr 2fr 3fr 2fr 1fr; /*5 rows, little on top and bottom, larger in middle*/
grid-row-gap: 20px;
justify-items: stretch;
align-items: stretch;
height: 100vh; /* vh lets you always make the container full screen height. So EASY! */
max-width: 1600px;
}
.App-header {
grid-column: 1/1; /* put the header only in the first column */
}
.featuredPost {
grid-column: 1/1; /* put the featured post only in the first column*/
grid-row: 2/4; /* spread featured post over row 2 and row 3 (stop at row 4) */
}
.spotifyPlayer {
grid-column: 2/3; /* put the player in the second column */
grid-row: 2/5; /* spread the player over rows 2, 3, and 4 (stopping at edge of 5)*/
}
.otherPosts {
grid-column: 1/1; /* put other posts in first column*/
grid-row-start: 4; /* other posts is only 1 row tall, just the the 4th row */
}
.footer {
grid-column: 1/3; /* spread footer across cols 1 and 2. (start at 1, end where 3 would be)*/
grid-row-start: 5; /* put footer in the 5th row (starting at row 4 edge) */
max-width:800px /* offsets our footer to the left on big screens and looks classy */
}
.App-title {
font-size: 1.5em;
}
@media only screen and (max-width: 800px) {
.App {
margin: auto;
padding-left: 20px;
padding-right: 20px;
text-align: center;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 2fr 1fr;
grid-row-gap: 20px;
justify-items: stretch;
align-items: stretch;
height: auto;
/*height: 100vh;*/
max-width: 1600px;
overflow: auto;
}
.App-header {
grid-column: 1/1;
grid-row: 1/1;
}
.featuredPost {
grid-column: 1/1;
grid-row: 2/3;
}
.spotifyPlayer {
grid-column: 1/1;
grid-row: 3/4;
}
.otherPosts {
grid-column: 1/1;
grid-row-start: 4/5;
}
.footer {
grid-column: 1/1;
grid-row-start: 5/6;
}
.App-title {
font-size: 1.5em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.