How to make one div over two div's only for mobile devices

StackOverflow https://stackoverflow.com/questions/23351636

Вопрос

I'm trying to make a simple page only for mobile devices.
There is header text, then goes text at the top, text at the bottom and image of the phone, that hovers both text (at the top and at the bottom).
I've tried to achive this with Twitter Bootstrap, but my result wasn't good enough, maybe because I'm don't understand overflow in CSS at all.
So this is what I'm trying to achieve:http://i.imgur.com/ds2CC2m.png
And here you can see what happening:http://plnkr.co/edit/t6w3MtoiD4KUuGe0mM10?p=preview
Or you can check a lot of ugly code right here: 

    <style type="text/css">
        .text p {
            padding-left: 15px;
        }
    </style>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
    <div style="position: relative;">
        <div class="row" style="background-color:#E4F6FC;">
            <div class="col-md-3" style="margin:10px">
                <p>Logo</p>
            </div>
        </div>
        <div class="row " style="background-color:#E4F6FC;">
            <div class="col-md-3 " style="color:#00AAE3;width: 100%;padding-right:0;height: 100%;position:absolute;z-index: 11;top: 0;left: 0;margin-top: 15%">
                <p>My</p>
                <p>default</p>
                <p>text</p>
            </div>
            <div class="col-md-3" style="padding:0;height: 100%;top: 0;left: 0;margin-top:-5%;float:right;z-index: 12;">
                <img src="http://i.imgur.com/qYV93nS.png">
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 text" style="padding-top:10px;padding-bottom:10px;color:#FFFFFF;background-color:#00AAE3;padding-right:0;height: 100%;top: 0;left: 0;z-index: 10;top: 0;left: 0;margin-top:-45%">
                <p>and few</p>
                <p>lines of great</p>
                <p>lorem ipsum</p>
                <p>here</p>
                <button type="button" style="margin-left: 15px;border-radius: 20px;border-color: #FFFFFF;background: none;color:#FFFFFF;" class="btn">
                    AWESOME BUTTON
                    <i class="fa fa-angle-right"></i>
                </button>
            </div>
        </div>
    </div>

I'm so apologize about mess, that you've seen and damage that was caused to your eyes :с

Это было полезно?

Решение

Two suggestions:

1) make your phone and text you want in teh same spot align:absolute, that way it will always stay in the same place. Make sure to get your z-align right so the phone sits on top.

2) I think your problem has to deal with the fact that your col-md won't work on smartphones! It only works for screens md and higher. To affect screens smaller than 749 px use col-sm and col-xs.

The new grid works on 12, so use that to your advantage to get your rows to line up the way you want. Example:

<div class="col-lg-2 col-md-1 col-xs-1"></div>

Hopefully this gets you on the right track -- not exactly sure what you are trying to get.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top