CODEWITHSUNDEEP
htmlcssresponsive-design
user3300065
user3300065

Reputation:

responsive columns not working?

Having trouble with my responsive layout. My twelve columns blocks are not on one row the last two float under it but should be all in one line.

Each row will be having its own column blocks.

You can get full code view of what I mean at my codepen snippet. http://codepen.io/riwakawebsitedesigns/pen/zbmLE 

.container {
  display: block;
  width: 94%;
  max-width: 1280px;
  margin: 2% auto 0 auto;
}

.row {
  display: block;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  background: #e5e5e5;
  min-height: 40px;
  text-align: center;
  float: left;
  margin-right: 20px;
}

.block-1 {
  width: 8.33333333%;
}

.block-2 {
  width: 16.66666667%;
}

.block-3 {
  width: 25%;
}

.block-4 {
  width: 33.33333333%;
}

.block-5 {
  width: 41.66666667%;
}

.block-6 {
  width: 50%;
}

.block-7 {
  width: 58.33333333%;
}

.block-8 {
  width: 66.66666667%;
}

.block-9 {
  width: 75%;
}

.block-10 {
  width: 83.33333333%;
}

.block-11 {
  width: 91.66666667%;
}

.block-12 {
  width: 100%;
}

.last, .omega, .end{
  margin: 0; 
}

Upvotes: 0

Views: 282

Answers (2)

Mattos
Mattos

Reputation: 447

Ruddy is right, you are not considering the gutter between columns. Do his way or...

SIMPLE SOLUTION:

Try to subtract 2% from each block class, worked here.

FANCY SOLUTION:

If you use LESS you can work with variables, so you could do something like this:

/*LESS FILE*/

@gutter: "20px";

.block1 {
   width: (8.333% - @gutter);
}

Hope it helps.

Upvotes: 0

Ruddy
Ruddy

Reputation: 9923

Remove the margin on the columns: 

.column {
  background: #e5e5e5;
  min-height: 40px;
  text-align: center;
  float: left;
  margin-right: 20px; <!-- remove -->
}

Instead of the reaching 100% width the margin is causing less width for them due to the 20px x 12. So your getting 100% + 240px, this is causing the last 2 to move below.

DEMO HERE

Upvotes: 4

Related Questions