Skip to content
Snippets Groups Projects

Fix explanation of WDN-STRETCH class

Merged Fix explanation of WDN-STRETCH class
wdn-stretch into master
Merged Ryan Klusman requested to merge wdn-stretch into master
Compare
and
+ 13
− 17
Compare changes
  • Side-by-side
  • Inline
resources/bands/index.shtml
+ 13
− 17
@@ -143,28 +143,24 @@
</div>
<div class="wdn-band" style="max-height:400px; overflow:hidden;">
<div class="wdn-stretch">
<div class="promo-container">
<img src="../../graphics/wide-horizon.jpg" alt="Wide Horizon Image" />
<div class="image-overlay" style="bottom: auto; top: 10%;">
<div class="wdn-inner-wrapper">
<div class="bp2-wdn-grid-set-halves">
<div class="wdn-col overlay">
<h2 class="clear-top" style="font-size: 38px;">"Stretch" Band</h2>
<p>
Stretch bands are used to display images, video, and other media at full width of the browser window. The band allows content to take advantage of the real estate provided by larger screens.
</p>
</div>
<div class="promo-container">
<img class="wdn-stretch" src="../../graphics/wide-horizon.jpg" alt="Wide Horizon Image" />
<div class="image-overlay" style="bottom: auto; top: 10%;">
<div class="wdn-inner-wrapper">
<div class="bp2-wdn-grid-set-halves">
<div class="wdn-col overlay">
<h2 class="clear-top" style="font-size: 38px;">"WDN-STRETCH"</h2>
<p>
<code>wdn-stretch</code> will set an element such as an image to full width or <code>width:100%</code>.
</p>
</div>
<div class="wdn-col">
<div class="wdn-col">
<pre>
<code>&lt;div class=&quot;wdn-band &quot;&gt;
&lt;div class=&quot;wdn-stretch&quot;&gt;
&lt;img src=&quot;../../graphics/wide-horizon.jpg&quot; alt=&quot;Wide Horizon Image&quot;&gt;
&lt;/div&gt;
&lt;img class=&quot;wdn-stretch&quot; src=&quot;../../graphics/wide-horizon.jpg&quot; alt=&quot;Wide Horizon Image&quot;&gt;
&lt;/div&gt;</code>
</pre>
</div>
</div>
</div>
</div>