Skip to content

Instantly share code, notes, and snippets.

@nakimera
Created April 8, 2019 12:00
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 nakimera/5a44830888d39cfe13379c2e727a11fc to your computer and use it in GitHub Desktop.
Save nakimera/5a44830888d39cfe13379c2e727a11fc to your computer and use it in GitHub Desktop.
This is the finished CSS file for my blogpost https://medium.com/p/dcaa1323bec2/edit on responsiveness using Flexbox
body {
margin: 0;
font-family: "Hind Madurai", sans-serif;
}
body > div {
min-height: 30vh;
min-width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.header {
background-color: #f4511e;
color: white;
flex-direction: column;
}
.header-title {
font-size: 50px;
}
.header-text {
font-size: 20px;
}
.section {
flex-flow: row wrap;
}
.section > div {
padding: 30px;
}
.small-div {
width: 200px;
}
.big-div {
width: 800px;
}
.bg-grey {
background-color: #f6f6f6;
}
.orange {
color: #f4511e;
}
.div-title {
font-size: 30px;
font-weight: 600;
}
.contact-container {
flex-flow: column;
padding-top: 30px;
}
.contact-form {
display: flex;
flex-flow: row wrap;
justify-content: center;
width: 100%;
}
.contact-form > div {
width: 500px;
max-height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
margin: 30px;
}
.input-field {
height: 40px;
margin: 15px 0;
}
.contact-btn {
margin-top: 15px;
height: 40px;
color: white;
border: 0;
background-color: #f4511e;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment