Equal height

[gdanova]

No stylesheet in the WET 4 GCWU theme distribution contains the class wb-eqht. Therefore, equal height containers such as http://wet-boew.github.io/themes-dist/theme-gcwu-fegc/demos/equalheight/equalheight-en.html do not work unless the stylesheet equalheight.min.css is referenced. But equalheight.min.css is considered a "demo" file; not core.

[thomasgohard]

You will not find any stylesheet with the class wb-eqht as the equal heights is implemented using JavaScript. The algorithm looks at all the elements contained in a container with class wb-eqht and equalises the height of all elements that are on the same baseline.

The CSS in equalheight.min.css just creates the condition for demonstrating the effect of equal height.

[gdanova]

If I copy the source from http://wet-boew.github.io/themes-dist/theme-gcwu-fegc/demos/equalheight/equalheight-en.html, which uses equalheight.min.css, to my server (and adjust paths), the equal height works. If I remove the reference to equalheight.min.css, the equal height ceases to work.

[thomasgohard]

Yes. But that's not because wb-eqht cannot work without equalheight.min.css.

As I said, equalheight.min.css only creates the condition to demonstrate the effect of equal height. It does so by adding display: inline-block and a specific width to elements that causes two or more of them to be rendered on the same baseline. This is what triggers the equal height effect.

Equal height demo (for which the CSS setting up the stage for equal height to happen is in equalheight.css)

Canada.ca home page (for which the CSS setting up the stage for equal height to happen is in theme.min.css)

If you want equal height to affect elements on your page, you have to add the display: inline-block and width: N, where N is 50% or less to those elements.

The CSS in equalheight.min.css is unsafe to use on a live site. It will apply the display: inline-block and width: N to any <section> element inside an element with class wb-eqht, including grand children. It will also not work if the children of the element with class wb-eqht are not <section> elements (equal height doesn't care what type of element it's working with and will work with any element).

The CSS in equalheight.min.css was created strictly for the demo page. It could have undesired side effects if used anywhere else. That's why a specific class (sect-lnks) was created for the Canada.ca home page. It allows targeting the effect to specific elements.

[gdanova]

OK, we'll stay away from equalheight.min.css.

EDIT: Please ignore the rest of this message and skip to the next.

So what is the standard way to make wb-eqht work with this theme? Can it work with a clean installation of WET 4, as I supposed from the documentation http://wet-boew.github.io/v4.0-ci/docs/ref/equalheight/equalheight-en.html, and as seen on Canada.ca and the CIC site, or does it require a CSS customization, i.e. (display: inline-block and width)?

I did test this with style attributes on the <section> tags within wb-eqht and it worked, but it's not responsive to viewport size changes. For example, style="display: inline-block; width: 33%" gives you three columns at all browser widths, which doesn't work well for under 768px.

The equalheight.min.css file contains @media to handle this. Does that mean we would need to add all this to get equal heights to work?

[gdanova]

I think what you're saying is that we should use the sect-lnks class and style it ourselves, since it doesn't exist in the CGWU theme, right? For example:

<style>
.sect-lnks{display: inline-block; margin-right: 15px; margin-bottom: 15px;}
@media (min-width:768px){.sect-lnks{width:48%}}
@media (min-width:1200px){.sect-lnks{width:31%}}
</style>

[thomasgohard]

You can import the sect-lnks class if its CSS rules do what you want.

You can also create your own class with whatever rules you want. As long as that class contains the display: inline-block and width: N rules.

The sect-lnks class starts the number of elements per baseline at one (width: 100%), increases it to two when the screen is at least 768 pixels wide (width: 48%) and to three when the screen is at least 1200 pixels wide (width: 31%).

If you want to change the number of elements per baseline, you need to change the width.

If you want to change the screen width at which a change in the number of elements per baseline happens, you need to change the @media (min-width: N).

Also, I wouldn't reference the .wb-eqht in your CSS selectors as it's redundant.

[gdanova]

It might be worth importing the sect-lnks class, since:

• the behaviour with the above styles works but is not quite right at width: 100% (mobile width); and
• it doesn't work at all in IE8.

To import sect-lnks, from where to where?

[thomasgohard]

I just checked Canada.ca in IE8 and the behaviour of the sect-lnks elements is working fine.

Can you describe the problems you're seeing? Or even better, include screenshots.

[gdanova]

_Please see update in next message below_

What's coded

WET 4 GCWU theme template http://wet-boew.github.io/themes-dist/theme-gcwu-fegc/index-en.html, with paths adjusted. For testing purposes, added the following in the <head>:

<style>
.sect-lnks{display: inline-block; margin-right: 15px; margin-bottom: 15px;}
@media (min-width:768px){.sect-lnks{width:48%}}
@media (min-width:1200px){.sect-lnks{width:31%}}
</style>

Page content

<div class="wb-eqht">
<section class="sect-lnks">
    <h2><a href="/gncy/prvcy/prvcpl-eng.html">Chief Privacy Officer (CPO)</a></h2>
    <p>The role of CPO ensures that the CRA's respect for the privacy of the information we maintain is reinforced and strengthened.</p>
</section>
<section class="sect-lnks">
    <h2><a href="/ntcs/prvcy2-eng.html">Privacy statement</a></h2>
    <p>Find out more about privacy policy and practices on our website.</p>
</section>
<section class="sect-lnks">
    <h2><a href="/gncy/prvcy/pia-efvp/menu-eng.html">Privacy impact assessment</a></h2>
    <p>Information about the analyses we conduct when we introduce or revise programs and services that raise privacy issues.</p>
</section>
 <section class="sect-lnks">
    <h2><a href="/gncy/prvcy/prvcpl-eng.html">Chief Privacy Officer (CPO)</a></h2>
    <p>The role of CPO ensures that the CRA's respect for the privacy of the information we maintain is reinforced and strengthened.</p>
</section>
<section class="sect-lnks">
    <h2><a href="/ntcs/prvcy2-eng.html">Privacy statement</a></h2>
    <p>Find out more about privacy policy and practices on our website.</p>
</section>
<section class="sect-lnks">
    <h2><a href="/gncy/prvcy/pia-efvp/menu-eng.html">Privacy impact assessment</a></h2>
    <p>Information about the analyses we conduct when we introduce or revise programs and services that raise privacy issues.</p>
</section>
</div>

Result

Firefox: See images. lg and md are OK, displaying 3 and 2 columns respectively. sm displays one column but it occupies about 50% width instead of 100%. xs is OK with one column at 100% width.

IE8: Content area is non-responsive to browser width changes.

[gdanova]

Aha! Changing @media (min-width:768px){.sect-lnks{width:48%}} to 47% does it! (Sometimes half of 100 is not exactly 48 :-)

But it's still not at all responsive in IE8. Probably because media query are not supported in IE8. Does this require a polyfill solution, possibly imported from a CSS in the Canada.ca theme?

[thomasgohard]

IE8 doesn't support media queries, correct. However, the responsiveness does work in IE8, which I assume is polyfilled.

Can you test with this page: http://wet-boew.github.io/themes-dist/theme-gcwu-fegc/demos/equalheight/equalheight-en.html. Does the number of columns change as you resize the IE8 browser window?

[gdanova]

Yes, that page works well in IE8, and the number of columns changes.

[thomasgohard]

Could it be your local testing environment?

If I remember correctly some things do not work under IE8 until it's uploaded to a server. Are you testing using the file:/// protocol?

[gdanova]

No. I'm using http://

But you just confirmed that media queries don't work in IE8. If you look at the message above (with the images), you can see how it's all coded, and that it's a test page with a <style> section in the <head>.

So what does http://wet-boew.github.io/themes-dist/theme-gcwu-fegc/demos/equalheight/equalheight-en.html contain that my test page could be missing?

[thomasgohard]

WET includes Respond.js to provide support for media queries in IE8. Maybe some of the JavaScript isn't being loaded in your case?

Respond.js is included in ie8-wet-boew.js. Can you confirm that file is being loaded?

[crichard]

When using the well class, how would I go about getting those boxes to be of equal height? (see screenshot).

<div class="row mrgn-tp-lg wb-eqh">
    <section class="col-md-6">
        <div class="well">
            <a href="http://www.veterans.gc.ca/eng/remembrance/information-for/students">Youth Corner</a>
        </div>
    </section>  
    <section class="col-md-6">
        <div class="well">
            <a href="socialmediahub.html">Visit our Social Media Hub<br />Leave a Comment</a>
        </div>
    </section>  
</div>
<div class="row wb-eqht mrgn-tp-lg" id="linkBoxes">
  <div class="col-md-3 pull-left">
    <div class="well sect-lnks">
        <img src="assets/ndh/soldieron.jpg" alt="" class="img-responsive" />
        <h3>Royal Proclamation</h3>
        <p>Royal Proclamation Sub-text TBD</p>
    </div>
  </div>
  <div class="col-md-3 pull-left">
    <div class="well sect-lnks">
        <img src="assets/ndh/soldieron.jpg" alt="" class="img-responsive" />
        <h3>Soldier On Afghanistan Relay</h3>
        <p>Soldier On Afghanistan Relay Sub-text TBD</p>
    </div>
  </div>
  <div class="col-md-3 pull-left">
    <div class="well sect-lnks">
        <img src="assets/ndh/vigil.jpg" alt="" class="img-responsive" />
        <h3><a href="http://www.forces.gc.ca/en/honours-history-military-memorials/Afghanistan-memorial-vigil.page?">Afghanistan Memorial Vigil</a></h3>
        <p>Commemorating the hard work, dedication and sacrifice of CAF members</p>
    </div>
  </div>
  <div class="col-md-3 pull-left">
    <div class="well sect-lnks">
        <img src="assets/ndh/ndh_activities.jpg" alt="" class="img-responsive" />
        <h3>National Day of Honour Activities</h3>
        <p>Royal Proclamation Sub-text TBD</p>
    </div>
  </div>
</div>

[thomasgohard]

Assuming you want to keep the margins between the well boxes:

• Add min-height: inherit to the <div> elements with the well class (I suggest you create a class for this instead of inlining it like I did below).
• Remove the classes pull-left and sect-lnks.
• Correct the class wb-eqht on the first <div> element (it's missing the "t").

<div class="row mrgn-tp-lg wb-eqht">
    <section class="col-md-6">
        <div class="well" style="min-height: inherit;">
            <a href="http://www.veterans.gc.ca/eng/remembrance/information-for/students">Youth Corner</a>
        </div>
    </section>  
    <section class="col-md-6">
        <div class="well" style="min-height: inherit;">
            <a href="socialmediahub.html">Visit our Social Media Hub<br />Leave a Comment</a>
        </div>
    </section>  
</div>
<div class="row wb-eqht mrgn-tp-lg" id="linkBoxes">
  <div class="col-md-3">
    <div class="well" style="min-height: inherit;">
        <img src="assets/ndh/soldieron.jpg" alt="" class="img-responsive" />
        <h3>Royal Proclamation</h3>
        <p>Royal Proclamation Sub-text TBD</p>
    </div>
  </div>
  <div class="col-md-3">
    <div class="well" style="min-height: inherit;">
        <img src="assets/ndh/soldieron.jpg" alt="" class="img-responsive" />
        <h3>Soldier On Afghanistan Relay</h3>
        <p>Soldier On Afghanistan Relay Sub-text TBD</p>
    </div>
  </div>
  <div class="col-md-3">
    <div class="well" style="min-height: inherit;">
        <img src="assets/ndh/vigil.jpg" alt="" class="img-responsive" />
        <h3><a href="http://www.forces.gc.ca/en/honours-history-military-memorials/Afghanistan-memorial-vigil.page?">Afghanistan Memorial Vigil</a></h3>
        <p>Commemorating the hard work, dedication and sacrifice of CAF members</p>
    </div>
  </div>
  <div class="col-md-3">
    <div class="well" style="min-height: inherit;">
        <img src="assets/ndh/ndh_activities.jpg" alt="" class="img-responsive" />
        <h3>National Day of Honour Activities</h3>
        <p>Royal Proclamation Sub-text TBD</p>
    </div>
  </div>
</div>

[crichard]

Works perfectly, thank you.

[gdanova]

Returning to your question: Respond.js is included in ie8-wet-boew.js. Can you confirm that file is being loaded?

How do I check if Respond.js is being loaded in IE8? Using Dev Tools as follows?

[thomasgohard]

@gdanova looks like ie8-wet-boew is being loaded.

Maybe IE8 isn't picking up the CSS that's setting the width of the blocks? I've had problem with IE8 picking up CSS sometimes. What CSS is IE8 applying to the blocks? Is it applying the correct width?

[gdanova]

Doesn't look like it's picking up the width setting. Here are the styles for the <section class="sect-lnks">:

Note that I'm using a <style> section in this test file (menupage-full.html) so I can use the sect-lnks class.

[thomasgohard]

Looks like we found the problem. Diagnosing why IE8 is ignoring CSS rules is not easy. Do you have a link to the page in question I can go to? Otherwise, can you post your HTML and CSS?

[gdanova]

HTML pasted below. CSS is in a <style> in the <head>.

<!DOCTYPE html>
<!--[if lt IE 9]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8"/>
<title>Menu test</title>
<link href="/wet-boew/assets/favicon.ico" rel="shortcut icon"/>
<link rel="schema.dcterms" href="http://purl.org/dc/terms/">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta name="description" content="Web Experience Toolkit (WET) includes reusable components for building and maintaining innovative Web sites that are accessible, usable, and interoperable. These reusable components are open source software and free for use by departments and external Web communities"/>
<meta name="dcterms.title" content="Content page - Web Experience Toolkit"/>
<meta name="dcterms.creator" content="French name of the content author / Nom en français de l'auteur du contenu"/>
<meta name="dcterms.issued" title="W3CDTF" content="Date published (YYYY-MM-DD) / Date de publication (AAAA-MM-JJ)"/>
<meta name="dcterms.modified" title="W3CDTF" content="Date modified (YYYY-MM-DD) / Date de modification (AAAA-MM-JJ)"/>
<meta name="dcterms.subject" title="scheme" content="French subject terms / Termes de sujet en français"/>
<meta name="dcterms.language" title="ISO639-2" content="eng"/>
<!--[if gte IE 9 | !IE ]><!-->
<link rel="stylesheet" href="/wet-boew/css/wet-boew.min.css"/>
<!--<![endif]-->
<link rel="stylesheet" href="/wet-boew/css/theme.min.css"/>
<!-- <link rel="stylesheet" href="/wet-boew/demos/equalheight/demo/equalheight.min.css"/> -->

<style>
.sect-lnks{display: inline-block; margin-right: 15px; margin-bottom: 15px;}
@media (min-width:768px){.sect-lnks{width:47%}}
@media (min-width:1200px){.sect-lnks{width:31%}}
</style>

<!--[if lt IE 9]>
<link rel="stylesheet" href="/wet-boew/css/ie8-wet-boew.min.css"/>
<link rel="stylesheet" href="/wet-boew/css/ie8-theme.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/wet-boew/js/ie8-wet-boew.min.js"></script>
<![endif]-->
<noscript><link rel="stylesheet" href="/wet-boew/css/noscript.min.css"/></noscript>
</head>

<body vocab="http://schema.org/" typeof="WebPage">
<ul id="wb-tphp">
    <li class="wb-slc"><a class="wb-sl" href="#wb-cont">Skip to main content</a></li>
    <li class="wb-slc visible-md visible-lg"><a class="wb-sl" href="#wb-info">Skip to site information</a></li>
</ul>
<header role="banner">
<div id="wb-bnr">
<div id="wb-bar">
<div class="container">
<div class="row">
<object id="gcwu-sig" type="image/svg+xml" tabindex="-1" role="img" data="/wet-boew/assets/sig-en.svg" aria-label="Government of Canada"></object>
<ul id="gc-bar" class="list-inline">
    <li><a href="http://www.canada.ca/en/index.html" rel="external">Canada.ca</a></li>
    <li><a href="http://www.canada.ca/en/services/index.html" rel="external">Services</a></li>
    <li><a href="http://www.canada.ca/en/gov/dept/index.html" rel="external">Departments</a></li>
    <li id="wb-lng"><h2>Language selection</h2>
    <ul class="list-inline">
        <li><a lang="fr" href="file-fra.html">Français</a></li>
    </ul>
    </li>
</ul>
<section class="wb-mb-links col-xs-12 visible-sm visible-xs" id="wb-glb-mn">
<h2>Menu</h2>
<ul class="pnl-btn list-inline text-right">
    <li><a href="#mb-pnl" title="Menu" aria-controls="mb-pnl" class="overlay-lnk" role="button"><span class="glyphicon glyphicon-th-list"><span class="wb-inv">Menu</span></span></a></li>
</ul>
<div id="mb-pnl"></div>
</section>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div id="wb-sttl" class="col-md-5"><a href="/menu-eng.html"><span>Canada Revenue Agency</span></a></div>
<object id="wmms" type="image/svg+xml" tabindex="-1" role="img" data="/wet-boew/assets/wmms.svg" aria-label="Symbol of the Government of Canada"></object>
<section id="wb-srch" class="visible-md visible-lg">
<h2>Search</h2>
<form action="http://recherche-search.gc.ca/rGs/s_r#wb-land" method="get" role="search" class="form-inline">
<div class="form-group">
    <label for="wb-srch-q">Search website</label>
    <input id="wb-srch-q" class="form-control" name="q" type="search" value="" size="27" maxlength="150" />
    <input type="hidden" name="cdn" value="canada" />
    <input type="hidden" name="st" value="s" />
    <input type="hidden" name="num" value="10" />
    <input type="hidden" name="langs" value="eng" />
    <input type="hidden" name="st1rt" value="0" />
    <input type="hidden" name="s5bm3ts21rch" value="x" />
</div>
<button type="submit" id="wb-srch-sub" class="btn btn-default">Search</button>
</form>
</section>
</div>
</div>
</div>
<nav role="navigation" id="wb-sm" data-ajax-fetch="/wet-boew/ajax/sitemenu-en.html" data-trgt="mb-pnl" class="wb-menu visible-md visible-lg" typeof="SiteNavigationElement"></nav>
<nav role="navigation" id="wb-bc" property="breadcrumb">
<h2>You are here:</h2>
<div class="container">
<div class="row">
<ol class="breadcrumb">
    <li><a href="/menu-eng.html">Home</a></li>
    <li>Menu test</li>
</ol>
</div>
</div>
</nav>
</header>
<main role="main" property="mainContentOfPage" class="container">
<h1 id="wb-cont" property="name">Protecting your privacy</h1>

<p>The Canada Revenue Agency is committed to protecting the privacy of individuals.</p>

<div class="wb-eqht">
<section class="sect-lnks">
    <h2><a href="/gncy/prvcy/prvcpl-eng.html">Chief Privacy Officer (CPO)</a></h2>
    <p>The role of CPO ensures that the CRA's respect for the privacy of the information we maintain is reinforced and strengthened.</p>
</section>
<section class="sect-lnks">
    <h2><a href="/ntcs/prvcy2-eng.html">Privacy statement</a></h2>
    <p>Find out more about privacy policy and practices on our website.</p>
</section>
<section class="sect-lnks">
    <h2><a href="/gncy/prvcy/pia-efvp/menu-eng.html">Privacy impact assessment</a></h2>
    <p>Information about the analyses we conduct when we introduce or revise programs and services that raise privacy issues.</p>
</section>
 <section class="sect-lnks">
    <h2><a href="/gncy/prvcy/prvcpl-eng.html">Chief Privacy Officer (CPO)</a></h2>
    <p>The role of CPO ensures that the CRA's respect for the privacy of the information we maintain is reinforced and strengthened.</p>
</section>
<section class="sect-lnks">
    <h2><a href="/ntcs/prvcy2-eng.html">Privacy statement</a></h2>
    <p>Find out more about privacy policy and practices on our website.</p>
</section>
<section class="sect-lnks">
    <h2><a href="/gncy/prvcy/pia-efvp/menu-eng.html">Privacy impact assessment</a></h2>
    <p>Information about the analyses we conduct when we introduce or revise programs and services that raise privacy issues.</p>
</section>
</div>

<dl id="wb-dtmd" role="contentinfo" property="dateModified">
<dt>Date modified:&#32;</dt>
<dd><time>2014-02-19</time></dd>
</dl>
</main>

<footer role="contentinfo" id="wb-info" class="visible-md visible-lg">
<div class="container">
<nav role="navigation">
<h2>Site information</h2>
<ul id="gc-tctr" class="list-inline">
    <li><a rel="license" href="/cpyrght-eng.html">Terms and conditions</a></li>
    <li><a href="/gncy/dsclsr/menu-eng.html">Transparency</a></li>
</ul>
<div class="row">
<section class="col-sm-3">
<h3>About</h3>
<ul class="list-unstyled">
    <li><a href="/gncy/menu-eng.html">About the CRA</a></li>
    <li><a href="/crrs/menu-eng.html">Careers at the CRA</a></li>
    <li><a href="/gncy/crprt-eng.html">Corporate reports</a></li>
    <li><a href="/gncy/prgrms_srvcs/mssn-eng.html">Mission, vision, and values</a></li>
    <li><a href="/gncy/nvstgtns/menu-eng.html">Compliance</a></li>
    <li><a href="/stmp-eng.html">Site map</a></li>
</ul>
</section>
<section class="col-sm-3">
<h3>Contact us</h3>
<ul class="list-unstyled">
    <li><a href="/cntct/menu-eng.html">Contact the CRA</a></li>
    <li><a href="/cntct/phn-eng.html">Telephone enquiries</a></li>
    <li><a href="/cntct/tso-bsf-eng.html">Our offices</a></li>
    <li><a href="/gncy/nvstgtns/vdp-eng.html">Voluntary disclosures</a></li>
    <li><a href="/gncy/nvstgtns/lds/menu-eng.html">Informant leads</a></li>
    <li><a href="/gncy/cmplntsdspts/menu-eng.html">Complaints and disputes</a></li>
</ul>
</section>
<section class="col-sm-3">
<h3>News</h3>
<ul class="list-unstyled">
    <li><a href="/nwsrm/menu-eng.html">Newsroom</a></li>
    <li><a href="/nwsrm/rlss/menu-eng.html">News releases</a></li>
    <li><a href="/nwsrm/txtps/menu-eng.html">Tax tips</a></li>
    <li><a href="/nwsrm/cnvctns/menu-eng.html">Convictions</a></li>
    <li><a href="/vdgllry/menu-eng.html">Video gallery</a></li>
</ul>
</section>
<section class="col-sm-3">
<h3>Stay connected</h3>
<ul class="list-unstyled">
    <li><a href="/esrvc-srvce/rss/menu-eng.html">RSS feeds</a></li>
    <li><a href="/esrvc-srvce/mllst/menu-eng.html">Email lists</a></li>
    <li><a rel="external" href="http://twitter.com/canrevagency">Twitter</a></li>
    <li><a rel="external" href="http://www.youtube.com/canrevagency">YouTube</a></li>
</ul>
</section>
</div>
</nav>
</div>
<div id="gc-info">
<div class="container">
<nav role="navigation">
<h2>Government of Canada footer</h2>
<ul class="list-inline">
    <li><a href="http://healthycanadians.gc.ca/index-eng.php"><span>Health</span>healthycanadians.gc.ca</a></li>
    <li><a href="http://www.travel.gc.ca/index-eng.asp"><span>Travel</span>travel.gc.ca</a></li>
    <li><a href="http://www.servicecanada.gc.ca/eng/home.shtml"><span>ServiceCanada</span>servicecanada.gc.ca</a></li>
    <li><a href="http://www.jobbank.gc.ca/intro-eng.aspx"><span>Jobs</span>jobbank.gc.ca</a></li>
    <li><a href="http://actionplan.gc.ca/en"><span>Economy</span>actionplan.gc.ca</a></li>
    <li id="canada-ca"><a href="http://www.canada.ca/en/index.html">Canada.ca</a></li>
</ul>
</nav>
</div>
</div>
</footer>
<!--[if gte IE 9 | !IE ]><!-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="/wet-boew/js/wet-boew.min.js"></script>
<!--<![endif]-->
<!--[if lt IE 9]><script src="/wet-boew/js/ie8-wet-boew2.min.js"></script><![endif]-->
</body>
</html>

[gdanova]

Hi. It it possible to look into this? Page code pasted above as requested. I realize this might be tedious, but I's still trying to get to the bottom of why equal height works in Firefox but not in IE8.

So far in my testing, I added a <style> section to the page to mimic the missing sect-lnks class, which does not exist in the GCWU theme. And it appears that IE8 is not picking up any width setting because they're using media queries:

<style>
.sect-lnks{display: inline-block; margin-right: 15px; margin-bottom: 15px;}
@media (min-width:768px){.sect-lnks{width:47%}}
@media (min-width:1200px){.sect-lnks{width:31%}}
</style>

[thomasgohard]

Found a way to make it work: Move the CSS to an external CSS files and link it using a <link> element. I guess Respond.js only picks up external CSS.

[LaurentGoderre]

Can this issue be closed?

[gdanova]

Yes, thanks for the details.

From: Laurent Goderre [mailto:notifications@github.com] Sent: June 17, 2014 4:09 PM To: wet-boew/wet-boew Cc: DaNova, George Subject: Re: [wet-boew] Equal height (#5016)

Can this issue be closed?

— Reply to this email directly or view it on GitHubhttps://github.com/wet-boew/wet-boew/issues/5016#issuecomment-46358328.