Add some media queries for small devices

This commit is contained in:
Eryn Wells 2017-05-05 08:26:34 -07:00
parent db5b9a676f
commit d77751eb9d
3 changed files with 57 additions and 20 deletions

View file

@ -1,24 +1,14 @@
@import url(./main.css);
body {
/* Flex box: center everything vertically */
align-items: center;
}
.wrapper {
margin-top: 120px;
padding: 60px 0 8px 0;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.wrapper {
width: 640px;
width: 100%;
margin: 20px 8px 20px 8px;
padding: 10px 0 2px 0;
text-align: center;
}
header {
margin-bottom: 60px;
margin-bottom: 20px;
}
footer {
@ -41,3 +31,26 @@ footer {
.nav a:hover {
color: #3486ff;
}
/* Desktops */
@media only screen and (min-width: 768px) {
.wrapper {
margin-top: 120px;
padding: 60px 0 8px 0;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.wrapper {
width: 640px;
}
body {
/* Flex box: center everything vertically */
align-items: center;
}
header {
margin-bottom: 60px;
}
}