T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
  1. Fred Cass
  2. General Discussion
  3. Thursday, 21 November 2013
  4.  Subscribe via email
Hi,

I'm trying to put a proportional coloured stripe down the right side of the page in all responsive views.

I tried

in style.less

body, html {
height: 100%;
}


@stripeImagePath: "/demo-2013/images";
#right-stripe {
background: url("@{stripeImagePath}/assets/stripe-600x20.png") repeat scroll 0% 0% transparent;
background-size: contain;
width: 50%;
position: absolute;
right: 0px;
height: 100% ;
max-height: 100% ;
z-index: -1;
}



in template manager injection panel "after <body>"

<div id="right-stripe"></div>



but the stripe does not extend to the bottom of the page.

The computed height for the div is less than the <body> height by about 2/3rds.

My div is the direct child of the <body>, so I cannot see why it is not the same height as the body.

Is there some template javascript messing with this value - Joomla, Bootstrap or T3 ?

I'm just trying to reproduce in T3 what is shown here
Comment
There are no comments made yet.
Accepted Answer Pending Moderation
0
Votes
Undo
fixed it. Usual impenetrable CSS kruft.

change

position: absolute;


to

position: fixed;


and it works.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.