#headerinner { display: flex; align-items: center; justify-content: space-between; } .right-sidebar { display: flex; align-items: center; flex-direction: column; } #pagination { display: flex; justify-content: flex-start; margin: 1em; } #pagination a { padding-right: 1em; } #headerinner { display: flex; flex-direction: row; flex-wrap: wrap; } #menu { display: flex; justify-content: flex-end; flex-wrap: wrap; } #menu a { margin-left: .5em; } footer { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 1em; } footer div { margin-top: 1em; } p a { text-decoration: underline; } article { display: flex; flex-direction: column; margin-bottom: 1em; } article a:hover { text-decoration: none; } article p:first-child { margin: 0; } article img { width: 100%; margin-bottom: 1em; } #readmore { margin-top: 1em; } #nav-posts { display: flex; flex-direction: column; } .post_tag { text-transform: capitalize; margin-left: .5em; display: inline-block; } /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) {...} /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) { .container { height: 100vh; } .content { display: flex; justify-content: space-between; } .right-sidebar { display: flex; flex-shrink: 0; flex-grow: 0; margin-left: 2em; width: 30ch; text-align: right; } #articledata { display: flex; flex-direction: row; } #articleimage { flex-shrink: 0; margin-right: 1em; margin-top: .4em; width: 30%; } article img { width: auto; } } /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) {...} /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) {...} /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) {...}