1. Your template doesn't contain viewport meta tag, as a result different devices assume different default page width (usually 960px on iPhones) and scales page down. MJ's preview mode doesn't emulate this feature.
2. Your template is based on bootstrap, and rendering depends on screen width. E.g. logo in the header is wrapped into a <div> with class="span6" that is defined in bootstrap in the following way:
.span6 {
width: 300px;
}
@media (min-width: 768px) and (max-width: 979px) {
.span6 {
width: 372px;
}
}
@media (min-width: 1200px) {
.span6 {
width: 540px;
}
}
That is template is not responsive. It would be possible to replace all class="row" by class="row-fluid" to use responsive bootstrap styles, but it looks like template doesn't follow bootstrap layout rules, because not all of "row" children have "span*" classes, etc.
Anyway, start point should be to add
<meta name="viewport" content="width=device-width, initial-scale=1">
to the template's <head> section.
