html - レスポンシブ スクロール コンテンツ

Question

スクロールに通知があるセクションをサイトに作成したいのですが、レスポンシブにしたいのですが、リスト項目に固定を割り当てることができないためできません。誰かがこれを達成する方法を知っているかどうか知りたいです.1つの通知を私の記事に入れ、残りの通知をパーセンテージを使用してその横に表示し、応答性を高めます!...あなたに残します私がやろうとしていることを見ることができます。皆さんの助けに感謝します。

http://jsfiddle.net/xtatanx/GPDn4/

html **

<article>
<ul id="slide">
    <li class="content">
        <h1>tittle</h1>
        <p>
            Cupcake ipsum dolor sit amet tiramisu. Gummies danish
            gingerbread tiramisu jelly-o bear claw powder.
            Gingerbread dessert jelly fruitcake sugar plum pie. 
            Dragée candy canes lollipop gingerbread cotton candy
            sugar plum cookie wafer wafer. Tiramisu sweet roll sweet
            roll candy canes. Cotton candy cake faworki dragée
            wypas chocolate bar tootsie roll tootsie roll fruitcake.
        </p>
        <a href="#">Vew more +</a>
    </li>
            <li class="content">
        <h1>tittle</h1>
        <p>
            Cupcake ipsum dolor sit amet tiramisu. Gummies danish
            gingerbread tiramisu jelly-o bear claw powder.
            Gingerbread dessert jelly fruitcake sugar plum pie. 
            Dragée candy canes lollipop gingerbread cotton candy
            sugar plum cookie wafer wafer. Tiramisu sweet roll sweet
            roll candy canes. Cotton candy cake faworki dragée
            wypas chocolate bar tootsie roll tootsie roll fruitcake.
        </p>
        <a href="#">Vew more +</a>
    </li>
            <li class="content">
        <h1>tittle</h1>
        <p>
            Cupcake ipsum dolor sit amet tiramisu. Gummies danish
            gingerbread tiramisu jelly-o bear claw powder.
            Gingerbread dessert jelly fruitcake sugar plum pie. 
            Dragée candy canes lollipop gingerbread cotton candy
            sugar plum cookie wafer wafer. Tiramisu sweet roll sweet
            roll candy canes. Cotton candy cake faworki dragée
            wypas chocolate bar tootsie roll tootsie roll fruitcake.
        </p>
        <a href="#">Vew more +</a>
    </li>
            <li class="content">
        <h1>tittle</h1>
        <p>
            Cupcake ipsum dolor sit amet tiramisu. Gummies danish
            gingerbread tiramisu jelly-o bear claw powder.
            Gingerbread dessert jelly fruitcake sugar plum pie. 
            Dragée candy canes lollipop gingerbread cotton candy
            sugar plum cookie wafer wafer. Tiramisu sweet roll sweet
            roll candy canes. Cotton candy cake faworki dragée
            wypas chocolate bar tootsie roll tootsie roll fruitcake.
        </p>
        <a href="#">Vew more +</a>
    </li>
</ul>
</article>

css *

html,body
{
    font-size: 100%;
}

p
{
    font-size: 16px;
}
article
{
    background: rgba(0, 0, 0, .4);
    width: 90%;
    height: auto;
    margin: 0 auto;
    padding: 2em;
}

article ul
{    
    margin:0;
    padding:0;
}

article ul li
{    
    width: 100%;
    height: auto;
    display: inline-block;
    margin:0;
    padding:0;
}

h1
{
    font-size:2em;
    text-transform:uppercase;
}