diff --git a/website/layout/AutodocsLayout.js b/website/layout/AutodocsLayout.js index 6353bbfad897cd..1f514a6cfe13f7 100644 --- a/website/layout/AutodocsLayout.js +++ b/website/layout/AutodocsLayout.js @@ -775,7 +775,7 @@ var EmbeddedSimulator = React.createClass({ : Run example in simulator; return ( -
+

Run this example

{imagePreview} @@ -855,9 +855,12 @@ var Autodocs = React.createClass({ path={example.path} metadata={metadata} /> - - {example.content.replace(/^[\s\S]*?\*\//, '').trim()} - +
+ + {example.content.replace(/^[\s\S]*?\*\//, '').trim()} + + +
); }, @@ -901,9 +904,6 @@ var Autodocs = React.createClass({ {metadata.next && Next →}
- - - ); diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css index 2436c14019ff73..e812927d97da16 100644 --- a/website/src/react-native/css/react-native.css +++ b/website/src/react-native/css/react-native.css @@ -125,6 +125,33 @@ html * { rendering-intent: auto; } +.example-container { + position: relative; +} + +.embedded-simulator, .embedded-simulator * { + box-sizing: border-box; +} + +.embedded-simulator p { + text-align: center; + color: #999; +} + +.embedded-simulator { + width: 210px; + position: absolute; + right: -200px; + top: 0; +} + +@media screen and (max-width: 680px) { + .embedded-simulator { + position: relative; + right: 0; + } +} + .prism { white-space: pre-wrap; font-family: 'source-code-pro', Menlo, 'Courier New', Consolas, monospace; @@ -1027,21 +1054,6 @@ small code, li code, p code { text-decoration: none !important; } -.column-left, .column-left * { - box-sizing: border-box; -} - -.column-left p { - text-align: center; - color: #999; -} - -.column-left { - float: left; - padding: 20px; - width: 210px; -} - /* Modal */ .modal-backdrop { background: rgba(0,0,0,.4);