Eclectic Media Git eclecticmedia.space / c9b8375
Fixes image stretching bug. Adds slick-border to col-8's Ariana Giroux 2 months ago
2 changed file(s) with 12 addition(s) and 8 deletion(s). Raw diff Collapse all Expand all
99 height: 100%;
1010 width: 100%;
1111 margin: 0; padding: 0;
12 margin: 1em 0;
1213 }
1314
1415 .col-8 {
1617 }
1718
1819 img {
19 width: 100%;
20 max-height: 48em;
20 max-width: 100%;
21 max-height: 100%;
22 position: relative;
23 top: 50%; left: 50%;
24 transform: translate(-50%, -50%);
2125 }
2226 }
2327
11 {% if loop.cycle('odd', 'even') is eq('even') %}
22 <div id="Demo">
33 <div class="row">
4 <div class="col-8">
5 <img src="{{ demo['img_uri'] }}" alt="a screenshot of the site in question" class="animated fadeIn" style="height: 100%; width: 100%;">
4 <div class="col-8 slick-border">
5 <img src="{{ demo['img_uri'] }}" alt="a screenshot of the site in question" class="animated fadeIn">
66 </div>
77 <div class="col-4">
8 <div class="demo-header animated rotateInUpLeft" style="text-align: left;">
8 <div class="demo-header animated rotateInUpLeft">
99 <h1>{{ demo['title'] }}</h1>
1010 <p>{{ demo['tag_line'] }}</p>
1111 <p><a class="btn btn-large btn-primary" href="{{ demo['cta_target'] }}">{{ demo['cta_tagline'] }}</a></p>
1717 <div id="Demo">
1818 <div class="row">
1919 <div class="col-4">
20 <div class="demo-header animated rotateInUpLeft" style="text-align: right;">
20 <div class="demo-header animated rotateInUpLeft">
2121 <h1>{{ demo['title'] }}</h1>
2222 <p>{{ demo['tag_line'] }}</p>
2323 <p><a class="btn btn-large btn-primary" href="{{ demo['cta_target'] }}">{{ demo['cta_tagline'] }}</a></p>
2424 </div>
2525 </div>
26 <div class="col-8">
27 <img src="{{ demo['img_uri'] }}" alt="a screenshot of the site in question" class="animated fadeIn" style="height: 100%; width: 100%;">
26 <div class="col-8 slick-border">
27 <img src="{{ demo['img_uri'] }}" alt="a screenshot of the site in question" class="animated fadeIn">
2828 </div>
2929 </div>
3030 </div>