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

-

I'm just trying to create a simple page for mobile devices.
The header is text, then the text is at the top, the bottom and the phone's image, which raises the text (top and bottom).
I have tried to get it from Twitter Bootstrap, but my result was not very good, maybe because I do not understand overflow in CSS.
So I'm trying to achieve it:
And here you can see what's happening:
or you can check many ugly codes here: 

  & style; Style = "text / css" & gt; .textp {padding-left: 15px; } & Lt; / Style & gt; & Lt; Link href = "css / bootstrap.min.css" rel = "stylesheet" & gt; & Lt; link href = "// netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel = "stylesheet" & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div style = "position: relative;" & Gt; & Lt; Div class = "line" style = "background color: # E4F6FC;" & Gt; & Lt; Div class = "col-md-3" style = "margin: 10px" & gt; & Lt; P & gt; Logo & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "line" style = "background color: # E4F6FC;" & Gt; & Lt; Div class = "col-md-3" style = "color: # 00AAE3; width: 100%; padding-right: 0; height: 100%; position: full; z-index: 11; top: 0; left: 0; margin-top: 15% "& gt; & Lt; P & gt; My & lt; / P & gt; & Lt; P & gt; Default & lt; / P & gt; & Lt; P & gt; Text & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "col-md-3" style = "padding: 0; height: 100%; top: 0; left: 0; margin-top: -5%; float: right; z-index: 12;" & Gt; & Lt; Img src = "http://i.imgur.com/qYV93nS.png" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-md-3 text" style = "padding-top: 10px; padding-bottom: 10px; color: #FFFFFF; background color: # 00AAE3; pad-right: 0; height: 100%; top: 0; left: 0; z-index: 10; above: 0; left: 0; margin-top: -45% "& gt; & Lt; P & gt; And some & lt; / P & gt; & Lt; P & gt; Great line & lt; / P & gt; & Lt; P & gt; Larem ipsum & lt; / P & gt; & Lt; P & gt; Here & lt; / P & gt; & Lt; Button type = "button" style = "margin-left: 15px; border-radius: 20px; border-color: #fffff; background: none; color: #fffff;" Class = "btn" & gt; Awesome Button & lt; I class = "fa-fa-angel-wright" & gt; & Lt; / I & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;

I am sorry about the disturbance, which you have seen and caused by your eyes, it has been damaged:

Post-lesson "Itemprop = "Text">

Two suggestions:

1) You create your phone and text in the same location aligned: Absolute, this way it will always be in one place. Be sure to get the phone so that the phone is sitting on the top.

2) I think your problem is this Your call-MD will not work on a smartphone! It works only for MD and higher screen. Use call-SM and Collx X to affect the screen below 749 px.

New grid works on 12, so use your advantages to bring your interests in the line up to your liking. Example:

Hopefully Are trying to take the right path - do not know exactly to what you.


Comments

Post a Comment

Popular posts from this blog

import - Python ImportError: No module named wmi -

-
I followed the instructions for downloading WMI for Python When I try to run the code for C.Win32_Service (StartMode = "Auto", state = "Stopped") import wmi c = wmi.WMI (): if Raw_input ("restart% s?"% S.Caption) .upper () == "Y": s.StartService () I got the error traceback (most recent call end): file ". \", Line 1, edit: I am using Python 2.7.6 EDIT2: I am running 64-bit Windows 2008 R2, and I've downloaded WMI-1.4.9.zip (md5). I removed the content and put it in D: Python \ Tools \ Scripts I executed dragon setup.py.install I said D : \ Python \ tools \ scripts to% PATH% and when I execute the code for C.Win32_Service (StartMode = "Auto", state = "Stopped") import wmi c = Wmi.WMI (): If raw_input ("Restart% s?"% S. Caption). () == "Y": s.StartService () error me Gets traceback (most recent call final): File ". See \", line 1, & lt; Modu...
Read more

Editing Python Class in Shell and SQLAlchemy -

-
I am working on the terminal on a shell script after this tutorial SQLAlchemy tutorial. I need to type gt; & Gt; & Gt; Sqlalchemy import column, integer, string & gt; & Gt; & Gt; Class user (base): __tablename__ = 'users' id = column (integer, primary_key = true) name = column (string) absolute name = column (string) password = column (string) def __repr __ (self): return "& lt ; User (name = '% s', absolute name = '% s', password = '% s') & gt; "% (Self.name, self.fullname, self.password) After the problem I have typed the password = column (string) I hit twice and changed .... >> I then took everything back but then an error was thrown because the class already exists ... I am not completely sure how to fix it. How do I open that slip in the shell script and edit it (Add DF to DRR) The error thrown below: / user / giripeters / TFSQLLX / Lib / python2.7 / site-packages / sqlalchemy / ext / decla...
Read more

lua - HowTo create a fuel bar -

-
I would like to create a fuel bar (empty with full tank). When the user touches the screen, the fuel once Dairejh these is my code: lifeBar = display.newImage ( "fuel_bar1.png") lifeBar.anchorX = 0 lifeboats. ======================== Lifetime Y = 37 screens Group: The Insert function (called Laifbar) However, I fuel Kansmoshn (equivalent to "pressed" variable to reduce the fuel tank "true") Have used. When pressed == is true, it means that the user is touching the screen: processed (fuel) processed () if life & gt; 0 and pressed == true remains = life - life 1 Life = life =. Wide-1 remains Value.text = string.format ("% d", life) End of this This function is active as the entrance event: runtime: addEventListener ( "Antrfrem" fuel Snsadna) it is very well, but my question is: pressed variable each time 5 seconds (once = = True) How is it possible to reduce the vitality width? I tried to add it to my touch even...
Read more