In the css/responsive.css, modify
.rotate {
position: absolute;
left: 0;
top: 120px;
right: 0;
z-index: 1;
}
to
.rotate {
position: absolute;
left: 0;
top: 120px;
/*right: 0;*/
z-index: 1;
}
.rotate h1 {
display: block;
}
to
.rotate h1 {
display: inline-block;
}
In the css/template.css, modify
to
.padder {padding: 20px 20px 50px;}
In the template file index.php, modify
//rotate
<?php if($option != 'com_contact') : ?>
...
to
//rotate
<?php if($option != 'com_contact') : ?>
if(jQuery('.cholder-inner').height() < jQuery('.rotate').width()) {
jQuery('.cholder-inner').height(jQuery('.rotate').width()+70);
}
<?php endif; ?>
var bottom = jQuery('.rotate').width()/2;
var left = bottom-(jQuery('#left').width()+40)/2;
jQuery('.rotate').css('top', bottom);
jQuery('.rotate h1').css('left', -left);
var cbottom = jQuery('.backToCategory').width()/2;
jQuery('.backToCategory').css('top', cbottom);
jQuery('.backToCategory p').css('left', -cbottom-jQuery('.backToCategory').height()/2);
jQuery( window ).resize(function() {
var bottom = jQuery('.rotate').width()/2;
var left = bottom-(jQuery('#left').width()+40)/2;
jQuery('.rotate').css('top', bottom);
jQuery('.rotate h1').css('left', -left);
var cbottom = jQuery('.backToCategory').width()/2;
jQuery('.backToCategory').css('top', cbottom);
jQuery('.backToCategory p').css('left', -cbottom-jQuery('.backToCategory').height()/2);
});
joomfreak