Add some media queries for small devices
This commit is contained in:
parent
db5b9a676f
commit
d77751eb9d
3 changed files with 57 additions and 20 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue