Post Header Positioning

• 

  mycoffeecravings · Member · May 16, 2012 at 5:27 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  I’m using the premium React theme and am trying to move the positioning of the header to my posts to the top instead of the left of the posts. When I change the position to absolute and attempt to move the header, it disappears altogether. Any assistance would be greatly appreciated! This is what the current coding looks like:

  h2.post-title {
  	margin: 15px 0 10px 0;
  	font-family: Helvetica, Arial, sans-serif;
  	font-size: 1.285714286em; /* 18 / 14 */
  	word-wrap: break-word;
  }
  h2.post-title a {
  	color: #444;
  }
  h2.post-title a:hover {
  	color: #275ea0;
  }
  .post-header p {
  	margin: 0;
  	font-size: 0.857142857em; /* 12 / 14 */
  	color: #777;
  }
  a.post-date-link {
  	color: #777;
  }
  .entry-post-image {
  	margin-top: 20px;
  }

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · May 16, 2012 at 8:12 pm

  • Copy link

  If you’re ever trying to visualize where stuff is that you can’t find on a page, using the web inspector in Chrome is really good at that. If you right-click something and select “Inspect Element”, it will show you the HTML and relevant CSS that apply to what you clicked. You can make adjustments right in the browser tools and when you hover over the HTML it will show you were the element is or point to it if it’s off page.

  Another way of troubleshooting would be to add large, ugly borders to show where stuff it. It might not help if you move something off page, but a lot of times it helps to visualize where things are being place and how large they are. Here is an example:

  #content.blog .post-header {
  	border: 2px dotted tomato;
  }
  #content.blog .entry.entry-post,
  #content.blog .post-footer,
  #content.blog .pagination {
  	border: 2px dotted turquoise;
  }

  I’m not sure if this will do exactly what you’re looking for, but try this out. It will make header area for posts and the content area the same width and place them one after the other:

  #content.blog .post-header {
  	float: none;
  	width: 100%;
  }
  #content.blog .entry.entry-post,
  #content.blog .post-footer,
  #content.blog .pagination {
  	width: 100%;
  	margin-left: 0%;
  }