Skip to content

Instantly share code, notes, and snippets.

@azmenak
Last active March 26, 2018 16:08
Show Gist options
  • Save azmenak/55efe945278d4a3348dcf92ba60cb980 to your computer and use it in GitHub Desktop.
Save azmenak/55efe945278d4a3348dcf92ba60cb980 to your computer and use it in GitHub Desktop.

The basic idea was the remove floats from the layout and switch to flexbox.

  1. There is a selector .page:not(.home) #content which holds the content for site; changed the style to
padding-bottom: 100px;
padding-right: 30px;
padding-left: 200px;
display: flex;
justify-content: center;

and for the size max-width: 767px

padding-left: 60px !important;
padding-right: 20px !important; 

and for max-width: 1023px

flex-wrap: wrap;
  1. The content section in .wrap then needs to specify its own sizing
flex-basis: 600px;
flex: 1 1;

and for size min-width: 1024px

margin-right: 40px;

also removed all other margins, paddings, floats

  1. .latest needs to adjust to have normal flow
width: 240px;

video#latest-post-image and .latest-post needs to remove position: absolute;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment