CODEWITHSUNDEEP
css
redanimalwar
redanimalwar

Reputation: 1523

CSS space origin unknown

I am trying to solve this problem with someone and we fail to figure this out.

What happen is when the media queries kick in the .entry becomes display: table; and the .entry-wrap and .entry-footer become display: table-cell.

The problem is that there is a space after the table layout kicks in and I have no clue why its there and how to make it go away.

enter image description here

I have uploaded the design here [link removed design not intended for public yet].

Upvotes: 0

Views: 34

Answers (2)

brobken
brobken

Reputation: 358

please add following to your appropriate media queries:

.entry-wrap {
   display: table-cell;
   vertical-align: top; /* <- add this line */
}

and eventually you can add this too:

.entry-footer {
   display: table-cell;
   vertical-align: bottom; /* <- add this line */
   width: 190px;
   background-color: #489eba;
}

Upvotes: 2

ajp15243
ajp15243

Reputation: 7950

You have this CSS rule on line 5548 of style.css:

.entry,
.entry-comments,
.comment-respond,
.author-box {
  background: #b7d9e4;
  border-top: 6px solid #489eba;
}

This is being applied to the article#post-xxxx elements, since the have the class entry on them. The space is coming from the border-top property.

The border-top is the same color as the right column with the pencil, so it looks like the space might be elsewhere other than the border, when it's not. You can clearly see how the border is applied if you change the border color.

Upvotes: 0

Related Questions