{ margin: 0; } /*Everything goes inside here.*/ .wrapper { width: 900px; margin: 0 auto; } .sidebar-img, .footer, .title, .links, .box { margin-top: 25px; } .title, .links, .footer { text-align: center; } /*Navigation links.*/ .links ul { list-style-type: none; padding: 0; margin: 0; } .links li { display: inline-block; } /*Some fancy code for fun, to add special characters around the navigation links. Change content to "" if you don't want these.*/ .links li:before { content: "「"; } .links li:after { content: "」 ∷ "; } .links .last:after { content: "」"; } .links li:before, .links li:after { letter-spacing: 0.1em; } /*Basic box code that is used for all content boxes on the page.*/ .box { border: 1px solid black; padding: 0.5em 1em; } /*Goes inside the box class. Not given any style by default, but can be used for stuff like fancy borders.*/ .inner { } /*Prevent image overflow.*/ .box img, .sidebar img { max-width: 100%; height: auto; } /*Wrapper for the sidebar.*/ .sidebar { width: 200px; float: left; } /*Container for the sidebar image.*/ .sidebar-image { border: 1px solid black; } /*Remove extra padding line at the bottom of the image.*/ .sidebar-image img { display: block; } /*This is where the title, navbar, and main content all go.*/ .main-wrapper { margin-left: 225px; } /*Two columns by default. The "single-column" class can be added to make it one column.*/ .main { columns: 2; column-gap: 25px; } /*Make sure boxes don't spread over multiple columns.*/ .main .box { display: inline-block; } .single-column { columns: 1; } .footer { margin-bottom: 25px; } @media(max-width:915px) { .wrapper { width: 95%; } .main-wrapper { width: calc(100% - 225px); } } @media (orientation: portrait), (max-width: 480px) { .wrapper { width: 100%; } .main-wrapper, .sidebar, .footer { margin: 0 auto; width: 90%; } .sidebar { float: none; display: block; } .sidebar-image { margin: 0 auto; width: 33%; margin-top:25px; } .sidebar .sidebar-image img { width: 100%; } .footer { margin-bottom: 25px; } }