How to make webpage stay the way it is when not full screen?

http://codepen.io/davegumba/pen/yOJmNB

This webpage falls apart when it's not full screen. How do I fix this so that it stays the way it is? Thanks. It's mainly the header and the three boxes that are out of place.

h1 {
  color:    #F5FFFA;
  margin: 50px auto;
  letter-spacing: 12px;
  line-height: 30px;
  font-size: 65px;
  font-family: 'Lora', serif;
}

.both {
  float: right;
}

.strike {
  float: left;
}

.grapple {
  width: 30%;
  margin-left: 50px;
}

Answers


Removing line-height form <h1> should fix the header. Use margin-top and margin-bottom if you want to leave space above and below.

For the boxes you can use CSS media query to apply float and margin only if browser window is wide enough. http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

You can also try flex to layout the boxes. https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Need Your Help

Angular in neither browser nor node environment

node.js angularjs apple-tv service-provider

I'm trying to pull a crazy trick and I am kinda stuck.

Searching a database from datatype

sql-server

I've actually forgotten that in which table of my database I've stored my images as binary