Different page width on different pages

Question

After installing bootstrap and playing around with it, I somehow set different page width for different pages, which I just hate. I guess I have to add something to my .css file to fix a page width, but everything I found on stackoverflow and google didn't help so far. So I need your help on that. Here's my app: http://murmuring-headland-8091.herokuapp.com/

Here's my .css file:

@import "bootstrap";
/* universal */

html {
  overflow-y: scroll;
}

body {
  padding-top: 60px;

}

body {
  background-image: url(http://i.imm.io/NOW7.png);
background-attachment:fixed;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
}

/* typography */

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

h1 {
  font-size: 3em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
}

h2 {
  font-size: 1.7em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
  color: #999;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}

/* header */

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: black;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 0px;
  font-weight: bold;
  line-height: 1;
}

#logo:hover {
  color: red;
  text-decoration: none;
}
.navbar-inner {
  background-color: #fff; /* place your solid color here */
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}
.navbar .nav,
.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.navbar-inner{
border-radius:50px;
background: #fff !important; 
background-image: none;
background-repeat: no-repeat;
filter: none !important;
border-top:10px solid #fff !important;
border-bottom:10px solid #fff !important;
border-left:5px solid #fff !important;
border-right:5px solid #fff !important;
}

.navbar .nav > li > a{
padding:12px 15px 12px;
color:#000000 !important;
text-shadow:none !important;
border-right: 1px solid #5BB75B;
border-left:1px solid #5BB75B;
-webkit-transition:background 1s ease;
-moz-transition:background 1s ease;
-o-transition:background 1s ease;
transition:background 1s ease;
}

.navbar .nav > li > a:hover{
background:#5BB75B !important;
color:#fff !important;
-webkit-transition:background 1s ease;
-moz-transition:background 1s ease;
-o-transition:background 1s ease;
transition:background 1s ease;
}

.navbar .nav .active > a,
.navbar .nav .active > a:hover,
.navbar .nav .active > a:focus {
color: #fff;
box-shadow:none;
background: #5BB75B !important;
}
.main-width { margin: 0px auto; }

Maybe something is wrong with my home.html.erb file, as home page is the only one different from others. I can post its code as well if you need it.

Have you read the documentation? It seems you are not using the scaffolding classes consistently. — Scott Simpson, Dec 03 '12 at 23:29
@ScottSimpson can you elaborate on that? i've read the bootstrap scaffolding doc, but i am new to coding so I need a more thorough explanation please — Illia Strikhar, Dec 04 '12 at 01:19

score 0 · Answer 1 · answered Dec 04 '12 at 09:22

0

Ok, I had some css for main page and a separate file, I killed it and now all is fine.

answered Dec 04 '12 at 09:22

Illia Strikhar

53
1
10

Different page width on different pages

1 Answers1