Is Canada.ca grid system change? I am not quite understand following grid code.

[Zhuglobal]

Could you explain following code:

<section class="home-your-gov gc-srvinfo well well-sm brdr-0">
    <div class="container">
        <h2>Your government</h2>
        <div class="row mrgn-bttm-lg">
            <div class="col-lg-7 col-xs-12 col-md-6">
                <div class="wb-eqht row">
                    <div class="col-lg-6">
                        <h3><a href="/en/contact.html">Contact us</a></h3>
                        <p>Department and agency contacts, change your address</p>
                    </div>
                    <div class="col-lg-6">
                        <h3><a href="/en/government/dept.html">Departments and agencies</a></h3>
                        <p>A list of current government and related organizations</p>
                    </div>
                    <div class="col-lg-6">
                        <h3><a href="/en/government/system.html">About government</a></h3>
                        <p>How government works, its priorities, laws, finances and regulations</p>
                    </div>
                    <div class="col-lg-6">
                        <h3><a href="https://open.canada.ca/en">Open government</a></h3>
                        <p>Accessible government, open information and data, open dialogue</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

[ghost]

Could you use the code tag (please)? See https://guides.github.com/features/mastering-markdown/.

Also what page are you referring to?

[Zhuglobal]

Canada.gc.ca home page: https://www.canada.ca/en.html

[ghost]

This would be a question best for https://github.com/wet-boew/GCWeb as Canada.ca follows slightly different style guide (also checkout https://www.canada.ca/en/government/about/design-system.html).

But I can say that the main page is basically mean't to be a large menu for people who have difficultly with the dropdown menu.

[Zhuglobal]

I've read from the style-guide Grid system. and found the problem. It seems that it said code Canada.gc.ca grid system is start with middle device like Loptop and small desktop computer. By default we can code col-md-4 as default device, is that correct?

[ghost]

Not sure I get what you mean, but col-md applies to any screen 992px or larger.

The code your referring to above is:

<div class="col-lg-7 col-xs-12 col-md-6">
<div class="wb-eqht row wb-init">
<div class="col-lg-6" style="vertical-align: top; min-height: 113px;">
<h3><a href="/en/contact.html">Contact us</a></h3>
<p>Department and agency contacts, change your address</p>
</div>
...
</div>
</div>

In this code there using col-lg-6 which basic means on screens 1200px or larger use 50% of the assigned space (for the contact us block).

col-lg = 1200px or larger -6 = 50% (lowest is 1 (8%) highest is 12 (100%))

To expand a little more basically the grid system is not for hiding content to a specific screen size, but for rearranging content based on screen size.

Source https://wet-boew.github.io/wet-boew-styleguide/design/grids-en.html.

Also @duboisp could chime in.

[Zhuglobal]

Thank you for your explaining. So, if we just code Canada.ca web pages, just use the grid system is this enough to make the web pages mobile friendly? I think the Canada.ca already has Bootstrap responsive design system, so we use the basic grid system should make the pages mobile friendly.

[duboisp]

By default we can code col-md-4 as default device, is that correct?

No, that is not a requirement, the requirement is to design for mobile first.

So, if we just code Canada.ca web pages, just use the grid system is this enough to make the web pages mobile friendly?

Not really, the web content need to be designed to support mobile friendly first. which is mostly a flatten version of it. After you use the grid system to organize the content into column for different larger view port.