fix non-working rwd

This commit is contained in:
janis
2023-03-09 11:56:11 +01:00
parent ba1c8153a9
commit 252a2745c7
2 changed files with 43 additions and 32 deletions

View File

@@ -118,6 +118,10 @@ body {
text-align: center; text-align: center;
} }
.unstyled-html, .create {
width: 100%;
}
/* This div will have crazy cool style, as this should represent that you can use (almost) all the CSS you want.*/ /* This div will have crazy cool style, as this should represent that you can use (almost) all the CSS you want.*/
.create .special-style { .create .special-style {
background-color: aqua; background-color: aqua;
@@ -191,8 +195,13 @@ body {
.sidebyside-element { .sidebyside-element {
width: 40%; width: 40%;
} }
} }
code { code {
text-align: justify; text-align: justify;
} }
code, pre {
max-width: 80vw;
}

View File

@@ -28,17 +28,22 @@
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<!--FEATURE OVERVIEW-->
<div class="centered">
<div class="create"> <div class="create">
<div class="unstyled-html"> <div class="unstyled-html">
<h3>Use HTML</h3> <h3>Use HTML</h3>
<!--TODO: Add html demo code--> <!--TODO: Add html demo code-->
<pre> <pre>
<code> <code>
&lt;div id=&quot;impress&quot;&gt; &lt;div id=&quot;impress&quot;&gt;
&lt;div class=&quot;step&quot;&gt; &lt;div class=&quot;step&quot;&gt;
&lt;h1&gt;impress.js - The JavaScript presentation framework&lt;/h1&gt; &lt;h1&gt;impress.js - The JavaScript presentation framework&lt;/h1&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</code> </code>
</pre> </pre>
</div> </div>
@@ -46,24 +51,21 @@
<h3 style="font-size: 200%;">And CSS</h3> <h3 style="font-size: 200%;">And CSS</h3>
<pre> <pre>
<code> <code>
.impress-supported .fallback-message { .impress-supported .fallback-message {
display: none; display: none;
} }
.step { .step {
width: 80vw; width: 80vw;
height: 80vh; height: 80vh;
background-color: white; background-color: white;
} }
</code> </code>
</pre> </pre>
</div> </div>
<p>To create stunning presentations</p> <p>To create stunning presentations</p>
</div> </div>
<!--FEATURE OVERVIEW-->
<div class="centered">
<div class="sidebyside"> <div class="sidebyside">
<div class="sidebyside-element"> <div class="sidebyside-element">
<h3>FULL power of CSS.</h3> <h3>FULL power of CSS.</h3>