Search code examples
twitter-bootstrapcssresponsive-designliferay-6

Responsive fixed Header and Slider with movable content


sorry for the beginner question but my experience with responsive web design is rather limited.

I am creating a portal theme that should consist of the following elements

-HEADER (Fixed)
-Image Slider (Fixed, just beneath the Header)
-Portal Content (Movable, position relative)

I have managed to make the header and the Image Slider fixed. The only way I could think of to make the portal content appear just below the image slider was to set

padding-top: 300px;
position: relative;

The problem that I have is that the image slider, which takes 100% of the page, looses height when I make the window smaller. That´s because it keeps the aspect ratio of the images shown.

Since I have set an absolute padding the gap between my portal content and my slider gets bigger and bigger the smaller the window gets (because the image slider looses height).

Is there any way to make the relative portal content appear just under the fixed image slider ?


Solution

  • I fixed it by making the headers position relative too. So no more fixed header ... ;)

    It took up way to much space anyway ...