Commit df0d01a

committed

Fixes for small screens

1 parent cf6ad4f commit df0d01aCopy full SHA for df0d01a

File tree

+13

-6

lines changed

+13

-6

lines changed

Lines changed: 3 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -3,13 +3,15 @@`
`3`	`3`
`4`	`4`	`<head>`
`5`	`5`	`<meta charset="UTF-8">`
	`6`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0">`
`6`	`7`	`<title>Drum Kit</title>`
`7`	`8`	`<link rel="stylesheet" href="style.css">`
`8`	`9`	`<link rel="icon" href="assets/drum.png">`
`9`	`10`	`<link rel="icon" href="assets/favicon.png">`
`10`	`11`	`</head>`
`11`	`12`
`12`	`13`	`<body>`
	`14`	`+ <div id="container">`
`13`	`15`	`<h1 id="title">Drum Kit</h1>`
`14`	`16`	`<div class="keys">`
`15`	`17`	`<div data-key="65" class="A key">`
`@@ -69,6 +71,7 @@ <h1 id="title">Drum Kit</h1>`
`69`	`71`	`</p>`
`70`	`72`	`</footer>`
`71`	`73`
	`74`	`+ </div>`
`72`	`75`	`<script src="main.js"></script>`
`73`	`76`
`74`	`77`	`</body>`

Lines changed: 10 additions & 6 deletions

Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,7 @@ h1 {`
`18`	`18`	`color: #FEFFE2;`
`19`	`19`	`font-family: "Arvo", cursive;`
`20`	`20`	`text-align: center;`
	`21`	`+ margin-bottom: 0;`
`21`	`22`	`}`
`22`	`23`
`23`	`24`	`span {`
`@@ -28,7 +29,7 @@ span {`
`28`	`29`	`display: flex;`
`29`	`30`	`flex-wrap: wrap;`
`30`	`31`	`flex: 1;`
`31`		`- min-height:40vh;`
	`32`	`+ align-content: center;`
`32`	`33`	`align-items: center;`
`33`	`34`	`justify-content: center;`
`34`	`35`	`}`
`@@ -40,7 +41,7 @@ span {`
`40`	`41`	`font-size: 1.5rem;`
`41`	`42`	`padding: 1rem .5rem;`
`42`	`43`	`transition: all .07s ease;`
`43`		`- width: 100px;`
	`44`	`+ width: 78pt;`
`44`	`45`	`text-align: center;`
`45`	`46`	`color: white;`
`46`	`47`	`background-color: #212121;`
`@@ -73,14 +74,17 @@ footer {`
`73`	`74`	`text-align: center;`
`74`	`75`	`color: white;`
`75`	`76`	`font-size: 1.5rem;`
`76`		`- position: absolute;`
`77`		`- left: 0;`
`78`		`- right: 0;`
`79`		`- bottom: 0;`
`80`	`77`	`margin-bottom: 0;`
`81`	`78`	`padding: 5px;`
`82`	`79`	`}`
`83`	`80`
`84`	`81`	`footer a:visited {`
`85`	`82`	`color: inherit;`
	`83`	`+}`
	`84`	`+`
	`85`	`+#container{`
	`86`	`+ height: 100vh;`
	`87`	`+ display: flex;`
	`88`	`+ flex-direction: column;`
	`89`	`+ justify-content: space-between;`
`86`	`90`	`}`

Comments

(0)