Selected date align content height

Hi there, does anyone know how to make the selected date always be in the center of the content shown below? Especially for mobile view it makes it better visible.. Another question is how to make the height of the content automatic. I’m not able to manage that so some text will just disappear..
– I use the latest WordPress and Timelinr.
Thanks!

Here is my style.css

.timeline {
	width: 800px;
	height: 400px;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
	background: url('../images/dot.gif') left 45px repeat-x;
}
.timeline .dates {
    margin-bottom: 20px !important;
	overflow: hidden;
}
.timeline .dates li {
	list-style: none !important;
	float: left;
	width: 130px;
	height: 50px;
	font-size: 24px;
	text-align: center;
	background: url('../images/biggerdot.png') center bottom no-repeat;
}
.timeline .dates a {
	line-height: 34px;
	padding-bottom: 10px;
	font-size: 16px;
    text-decoration: none !important;
}
.timeline .dates .selected {
    font-size: 34px;
}
.timeline .issues {
	height: 350px;
	/*overflow: hidden;*/
	margin: 0;
}
.timeline .issues li {
	width: 800px !important;
	height: 400px;
	list-style: none !important;
	float: left;
	margin: 0;
}
.timeline .issues li.selected img {
	-webkit-transform: scale(1.0,1.0);
	-moz-transform: scale(1.0,1.0);
    -o-transform: scale(1.0,1.0);
    -ms-transform: scale(1.0,1.0);
    transform: scale(1.0,1.0);
}
.timeline .issues li img {
	float: auto;
	margin: 10px 30px 10px 50px;
	background: transparent;
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */
	zoom: 1;
	-webkit-transition:  all 2s ease-in-out;
	-moz-transition: all 2s ease-in-out;
	-o-transition: all 2s ease-in-out;
	-ms-transition: all 2s ease-in-out;
	transition: all 2s ease-in-out;
	-webkit-transform: scale(0.6,0.6);
	-moz-transform: scale(0.6,0.6);
    -o-transform: scale(0.6,0.6);
    -ms-transform: scale(0.6,0.6);
    transform: scale(0.6,0.6);
    width: 220px;
}
.timeline .issues li span, .timeline .issues li a {
	color: #757575;
	font-size: 16px;
	margin: 20px 0 0 30px;
	text-shadow: #898989 1px 1px 2px;
}
.timeline .issues li p {
	font-size: 14px;
	font-weight: normal;
	line-height: 22px;
	margin: 0 30px 0 30px;
	text-align: justify;
	/*text-shadow: #898989 1px 1px 2px;*/
}
.timeline #grad_left,
.timeline #grad_right {
	width: 100px;
	height: 400px;
	position: absolute;
	top: 0;
}
.timeline #grad_left {
    left: 0;
    background: url('../images/grad_left.png') repeat-y;
}
.timeline #grad_right {
    right: 0;
    background: url('../images/grad_right.png') repeat-y;
}
.timeline .next,
.timeline .prev {
	position: absolute;
	top: 0;
	font-size: 70px;
	top: 170px;
	width: 22px;
	height: 38px;
	background-position: 0 0;
	background-repeat: no-repeat;
	text-indent: -9999px;
	overflow: hidden;
}
.timeline .next:hover,
.timeline .prev:hover {
	background-position: 0 -76px;
}
.timeline .next {
	right: 0;
	background-image: url('../images/next.png');
}
.timeline .prev {
	left: 0;
	background-image: url('../images/prev.png');
}
.timeline .next.disabled,
.timeline .prev.disabled {
	opacity: 0.2;
}
/*
#Tablet (Portrait)
==================================================
*/
@media only screen and (min-width: 768px) and (max-width: 960px) {
	.timeline {width: 700px;}
	.timeline .dates {margin-left: 0px !important;}
	.timeline .dates li {font-size:20px;}
	.timeline .issues li {width: 700px;}
	.timeline .issues li span {font-size:34px;}
	.timeline .issues li p {margin: 0 220px 0 0; font-size:11px;}
	.timeline .issues li img {width: 150px !important;}
}
/*
#Mobile (Landscape)
==================================================
*/
@media (min-width: 480px) and (max-width: 767px) {
	.timeline {width: 600px !important;}
	.timeline .dates {margin-left: 100px !important;}
	.timeline .dates li {font-size:20px;}
	.timeline .issues li {width: 600px;}
	.timeline .issues li span {font-size:34px;}
	.timeline .issues li p {margin: 0 250px 0 0; font-size:11px;}
	.timeline .issues li img {width: 150px !important;}
}
/*
#Mobile (Portrait)
==================================================
*/
@media (max-width: 360px) {
	.timeline {width: 100%;}
	.timeline .dates {margin: 10px;}
	.timeline .dates .selected {font-size:18px;font-weight:bold;}
	.timeline .dates li {font-size:14px;width:120px;}
	.timeline .issues li {width: 246px !important;margin-left:5px;}
	.timeline .issues li span {font-size:12px;margin-left:15px;}
	.timeline .issues li p {margin:0 15px 0; font-size:12px;}
	.timeline .issues li img {width: 50px !important;margin:5px 0px 5px 5px;}
        .timeline .next {margin-right:0px;}
        .timeline .left {margin-left:0px;}
}

http://wordpress.org/plugins/wp-jquery-timelinr/