Skip to content

Instantly share code, notes, and snippets.

@zocom-christoffer-wallenberg

zocom-christoffer-wallenberg/index.html

Last active February 4, 2020 10:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zocom-christoffer-wallenberg/259c3484bb019561cb068deb0d22c1ff to your computer and use it in GitHub Desktop.
Save zocom-christoffer-wallenberg/259c3484bb019561cb068deb0d22c1ff to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Grid - Media queries</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="wrapper">
<h1 class="title">Media Queries</h1>
<h2 class="subtitle">Responsiv design! HELL YEAH!</h2>
</section>
</body>
</html>
Raw
style.css
body {
margin: 0;
padding: 0;
}
.wrapper {
background: #FAF5EB;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.title {
color: #692D55;
font-size: 48px;
margin: 0;
}
.subtitle {
font-size: 20px;
color: #000000;
display: none;
}
@media only screen and (min-width: 600px) and (max-width: 800px) {
.wrapper {
background: #000000;
}
}
@media only screen and (max-width: 600px) {
.wrapper {
background: #ffffff;
}
.subtitle {
display: block;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment