Search code examples
cssresponsive-designstylesheet

How can I style a header to be a consistent size on many devices?

I've been trying to create responsive website template for myself, I'd like to do it mostly from scratch.

I haven't been able to get the header to size consistently.

I have what I've written here:

header {
  background: #222;
  height: 60px;
  line-height: 60px;
  transition: top 0.2s linear;
  width: 100%;
  overflow: hidden;
  text-align: center;
}

.hidden-header-fixed {
  top: -60px;
  position: fixed;
}
.visible-header-fixed {
  top: 0px;
  position: fixed;
}

.visible-header-abs {
  position: absolute;
}

#logo {
  display:inline;
  font-size: 30px;
  color: #eee;
  text-transform: uppercase;
  letter-spacing: -1px;
  font-weight: bold;
  font-family: 'Lato', sans-serif;
  text-align: center;
  width: 200px;
}

#logo:hover {
  color: #aaa;
  text-decoration: none;
}

.menu-button {
  height: 40px;
  width: 40px;
  background: #eee;
  display:inline;
  float: right;
  margin: 10px;
  border-radius: 20px;
}

In context at: http://jsfiddle.net/7mc3oczp/

When I view the page on my phone though it looks like this:

enter image description here

The header is much too small here to use. I see other sites with a header that has a constant height translate very well to my mobile's browser, how is this accomplished? Why is mine zoomed so far out?

Solution

  • There are two options for doing it.

    1. You can write your own code using media queries for different devices, at first check it, list out your break point & change code for that portion. It's very tedious and time consuming process.

    2. You can do it using framework. It's easier to manage responsiveness using twitter bootstrap, it's easy to learn. Check http://getbootstrap.com and then modify your code using there format.