#headerinner { display: flex; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: wrap; background-color: #741e94; background: url(/images/logo_back_full.svg); } .container { background-color: var(--background-alt); background-image: linear-gradient(var(--background-alt), var(--background)); } main h1 { margin-top: 1rem; margin-bottom: 0rem; } .right-sidebar { display: flex; flex-direction: row; } .right-sidebar a { color: var(--text-muted); } #pagination { display: flex; justify-content: flex-start; margin: 1rem; } #pagination a { padding-right: 1rem; } #menu { display: flex; justify-content: flex-end; flex-wrap: wrap; padding-right: .5rem; } #menu a { margin-left: .5rem; color: var(--text-header); } footer { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 1rem; } footer div { margin-top: 1rem; } p a { text-decoration: underline; } article a:hover { text-decoration: none; } article p:first-child { margin: 0; } article #readmore { margin-top: 1rem; } #nav-posts { display: flex; flex-direction: column; } .post_tag { text-transform: capitalize; margin-left: .5rem; } article { display: flex; flex-direction: column; margin-bottom: 1rem; padding: 1rem; } article h2 { margin: 0; } #articlemeta { margin-bottom: 1rem; } #articlecontent { display: flex; flex-direction: column; } #articleimage { margin-top: 1rem; } #articledata { display: flex; flex-direction: column-reverse; } .articlebgcol1 { background-color: var(--background); } #readmore { margin-bottom: 1rem; } /* 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) { #headerinner { padding: 10px; } .container { min-height: 100vh; } .content { padding-left: 10px; padding-right: 10px; display: flex; justify-content: space-between; min-height: 60vh; } .right-sidebar { flex-shrink: 0; flex-grow: 0; margin-left: 2rem; text-align: right; flex-direction: column; min-width: 15%; } footer { padding-left: 10px; padding-right: 10px; } #articledata { display: flex; flex-direction: row; } #articleimage { margin-top: .5rem; display: flex; flex-direction: column; flex-shrink: 0; margin-right: 1rem; max-width: 15rem; min-width: 1rem; height: 100%; } .borderrad25 { border-radius: 25px; } } /* 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) {...}