Adaptation Move Post Titles Above Post Info

  • Unknown's avatar
    jsuzack · Member ·

    I have scoured the web for a way to edit the post layout to put the titles between the featured image and post info (date, categories, etc.). Particularly, I am looking for a way to do this with custom CSS.

    Can anyone help?

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

  • Unknown's avatar
    hallluke · Member ·

    I have tried with some table group positions, relative positioning and weird negative margins but I can’t find a way that works reliably for different screen sizes, featured image heights and title lengths. Hopefully someone else will have a better idea, sorry!

  • Unknown's avatar
    designsimply · Member ·

    put the titles between the featured image and post info

    I worked on this and came up with a somewhat tricky solution:

    .entry-header {
	padding: 0;
	position: relative;
}

.entry-title {
	position: absolute;
	width: 100%;
	height: 60px;
	overflow: hidden;
	top: -90px;
}

.entry-meta {
	padding: 0;
	margin-top: 90px;
}

    It’s tricky because in order to do it we need to know for sure that the titles will always be a set height. If they aren’t, for example if you had a long post title that fell over to two lines, then the post info and the post title would overlap in odd ways. To get around that, I forced the height for the title to 60px in the example above and set the overflow to hidden. This effectively will cut off any long titles, and that’s the tradeoff for this kind of solution. If your titles are always short enough to fit on one line, then it might just work for you! If you’d like the option to have longer titles, then I don’t see a really good way to do that. Try out the example above, but also make sure to test several posts after you apply it. I tested the first several and also tested at various browser widths, but you should test it as well.

  • The topic ‘Adaptation Move Post Titles Above Post Info’ is closed to new replies.