There seems to be a bug in my web application, which is that the line height is not working using the theme punch library. The theme punch library encodes inline styles onto an element, so even if I wrote down
<h1 style="line-height: 15px !important;">Hello</h1>
it still would not work. Keep in mind themepunch uses jquery and a bit of HTML. I'll display my user perspective problem and the developer's problem.
User's Perspective:
Do you see how ugly the line height is? and also I would like to shift the "Learn More" to the left a bit.
Developer's Perspective
Consider the following code:
Slider.html
<!-- Slider Area Start Here-->
<div class="slider-area1">
<div id="rev_slider_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="photography1" style="background-color:transparent;padding:0px;">
<div id="rev_slider_1" class="rev_slider fullscreenbanner" data-version="5.0.7" style="display: none;">
<ul>
<!-- SLIDE -->
<li data-index="rs-1" data-transition="slideoververtical">
<!-- MAIN IMAGE -->
<img src="../assets/assets/images/bg/bg-1.jpeg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
<!-- LAYER NR. 1 -->
<!-- All these attributes are themepunch library attrs, but a lot of them are not working. I am not sure if it's because I didn't initalize something or not,
but I'll show the Jquery initalization. In case I am missing something, please let me know. Keep in mind, I am only interested in data-lineheight ... -->
<div class="tp-caption slide-text-one tp-resizeme" id="slide-1-layer-1" data-frames='[{
"delay": 500,
"speed": 300,
"from": "opacity: 0",
"to": "opacity: 1"
}, {
"delay": "wait",
"speed": 300,
"to": "opacity: 0"
}]' data-x="center" data-hoffset="['10','30','','0']" data-lineheight="['32', '32', '32', '24']" data-y="['middle','middle','middle','middle']" data-voffset="['-100','-100','-30','-100']" data-fontsize="['inherit','20','20','17']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" data-mask_in="x:right;y:0;s:inherit;e:inherit;" data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" data-start="500" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 5; white-space: nowrap; font-family: 'Roboto Condensed', sans-serif; line-height: 30px;">
<h1 appResponsiveDirective id="lineHeight">muscle <span>power</span></h1>
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption slide-text-two tp-resizeme" data-frames='[{
"delay": 500,
"speed": 300,
"from": "opacity: 0",
"to": "opacity: 1"
}, {
"delay": "wait",
"speed": 300,
"to": "opacity: 0"
}]' id="slide-1-layer-2"
data-lineheight="['256', '256', '256', '256']" data-x="center" data-y="['center','middle','middle','middle']" data-voffset="['-0','-0','70','0']" data-fontsize="['60','60','60','30']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" style="z-index: 6; white-space: nowrap; font-family: 'Roboto Condensed', sans-serif; line-height: 30px;">
<h1 appResponsiveDirective class="text-center" id="lineHeight" style="line-height: 15px !important;" >fitness is not a destination<br> it is a way of life</h1>
</div>
<!-- LAYER NR. 3 -->
<div appResponsiveDirective id="lineHeight" class="tp-caption rev-btn white-btn" id="slide-1-layer-4" data-frames='[{
"delay": 500,
"speed": 300,
"from": "opacity: 0",
"to": "opacity: 1"
}, {
"delay": "wait",
"speed": 300,
"to": "opacity: 0"
}]' data-x="center" data-lineheight="['32', '32', '32', '24']" data-hoffset="['65','0','0','0']" data-y="['middle','middle','bottom','bottom']" data-voffset="['100','130','200','200']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_hover="o:1;rX:0;rY:0;rZ:0;z:0;s:300;e:Power3.easeOut;" data-style_hover="c:rgba(255, 255, 255, 1.00);bc:rgba(255, 255, 255, 1.00);" data-transform_in="y:bottom;s:1200;e:Power4.easeInOut;" data-transform_out="y:[175%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;"
data-start="1250" data-splitin="none" data-splitout="none" data-actions='[{"event":"click","action":"jumptoslide","slide":"rs-164","delay":""}]' data-responsive_offset="on"
data-responsive="off" style="z-index: 8; white-space: nowrap; font-size: 18px; line-height: 15px; color: rgba(255, 255, 255, 1.00);font-family:'Roboto Condensed', sans-serif;text-transform: uppercase; line-height: 30px;">learn more
</div>
</li>
<!-- Slide 2, 3, .. -->
</ul>
</div>
</div>
<!--#rev_slider_1_wrapper-->
</div>
<!-- Slider Area End Here-->
Jquery initalization:
/*
Keep in mind, this is not really my code so I don't know what most of these properties do
*/
$("#rev_slider_1").show().revolution({
sliderType: "standard",
sliderLayout: "fullscreen",
dottedOverlay: "none",
autoPlay: false,
spinner: "spinner4",
navigation: {
keyboardNavigation: "off",
keyboard_direction: "horizontal",
mouseScrollNavigation: "off",
onHoverStop: "on",
touch: {
touchenabled: "on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
drag_block_vertical: false
},
arrows: {
enable: true,
style: 'metis',
tmp: '',
rtl: false,
hide_onleave: true,
hide_onmobile: true,
hide_under: 0,
hide_over: 9999,
hide_delay: 200,
hide_delay_mobile: 1200,
left: {
container: 'slider',
h_align: 'left',
v_align: 'center',
h_offset: 20,
v_offset: 0
},
right: {
container: 'slider',
h_align: 'right',
v_align: 'center',
h_offset: 20,
v_offset: 0
}
},
},
responsiveLevels: [1240, 1024, 778, 480],
gridwidth: [1240, 1024, 778, 480],
gridheight: [868, 768, 960, 720],
lazyType: "none",
shadow: 0,
shuffle: "off",
autoHeight: "off",
});
// revolution slider end