Jump to content

w3.css responsive - can it replace a table?


hikingwithu2

Recommended Posts

I have created a "table" using css responsive only, and it looks fine on my laptop, but on my phone it is completely hosed. Here is the code, maybe somebody can take a look and clue me in on why it doesn't work on my phone -

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<!-- First table for positive form verb to be -->
<div class="w3-row w3-center w3-grey">
  <div class="w3-col l2 m2 s2"> </div>
  <div class="w3-col l2 m2 s2">Pronoun</div>
  <div class="w3-col l2 m2 s2">To Be</div>
  <div class="w3-col l2 m2 s2">Contraction</div>
  <div class="w3-col l2 m2 s2">Verb</div>
  <div class="w3-col l2 m2 s2"> </div>
</div>
<div class="w3-row w3-center">
  <div class="w3-col l2 m2 s2 w3-blue" style="height:158px"> <br> <br> <br><b>Positive</b></div>
  <div class="w3-col l2 m2 s2 w3-green">I</div>
  <div class="w3-col l2 m2 s2 w3-green">am</div>
  <div class="w3-col l2 m2 s2 w3-green">I'm</div>
  <div class="w3-col l2 m2 s2 w3-green">working.</div>
  <div class="w3-col l2 m2 s2 w3-white"> </div>

  <div class="w3-col l2 m2 s2 w3-indigo">He<br>She<br>It</div>
  <div class="w3-col l2 m2 s2 w3-indigo">is<br> <br> </div>
  <div class="w3-col l2 m2 s2 w3-indigo">He's<br>She's<br>It's</div>
  <div class="w3-col l2 m2 s2 w3-indigo"> <br>working.<br> </div>
  <div class="w3-col l2 m2 s2 w3-white"> <br> </div>
  <div class="w3-col l2 m2 s2 w3-white"> </div>

  <div class="w3-col l2 m2 s2 w3-red">We<br>You<br>They</div>
  <div class="w3-col l2 m2 s2 w3-red">are<br> <br> </div>
  <div class="w3-col l2 m2 s2 w3-red">We're<br>You're<br>They're</div>
  <div class="w3-col l2 m2 s2 w3-red"> <br>working.<br> </div>
  <div class="w3-col l2 m2 s2 w3-white"> <br> </div>
  <div class="w3-col l2 m2 s2 w3-white"> </div>
</div>
<!-- end of first table -->
<!-- second table for negative form of verb to be -->
<div class="w3-row w3-center w3-grey">
  <div class="w3-col l2 m2 s2"> </div>
  <div class="w3-col l2 m2 s2">Pronoun</div>
  <div class="w3-col l2 m2 s2">To Be</div>
  <div class="w3-col l2 m2 s2">Contraction</div>
  <div class="w3-col l2 m2 s2">Contraction</div>
  <div class="w3-col l2 m2 s2">Verb</div>
</div>
<div class="w3-row w3-center">
  <div class="w3-col l2 m2 s2 w3-aqua" style="height:158px"> <br> <br> <br><b>Negative</b></div>
  <div class="w3-col l2 m2 s2 w3-yellow">I</div>
  <div class="w3-col l2 m2 s2 w3-yellow">am</div>
  <div class="w3-col l2 m2 s2 w3-yellow">I'm not</div>
  <div class="w3-col l2 m2 s2 w3-yellow"> </div>
  <div class="w3-col l2 m2 s2 w3-yellow">working</div>

  <div class="w3-col l2 m2 s2 w3-indigo">He<br>She<br>It</div>
  <div class="w3-col l2 m2 s2 w3-indigo"> <br>is<br> </div>
  <div class="w3-col l2 m2 s2 w3-indigo">He's not<br>She's not<br>It's not</div>
  <div class="w3-col l2 m2 s2 w3-indigo">He isn't<br>She isn't<br>It isn't</div>
  <div class="w3-col l2 m2 s2 w3-indigo"> <br>working.<br> </div>


  <div class="w3-col l2 m2 s2 w3-red">We<br>You<br>They</div>
  <div class="w3-col l2 m2 s2 w3-red">are<br> <br> </div>
  <div class="w3-col l2 m2 s2 w3-red">We're not<br>You're not<br>They're not</div>
  <div class="w3-col l2 m2 s2 w3-red">We aren't<br>You aren't<br>They aren't</div>
  <div class="w3-col l2 m2 s2 w3-red"> <br>working.<br> </div>
</div>
<!-- end of second table -->
<!-- third table for question form of verb to be -->
<div class="w3-row w3-center w3-grey">
  <div class="w3-col l2 m2 s2"> </div>
  <div class="w3-col l2 m2 s2">To Be</div>
  <div class="w3-col l2 m2 s2">Pronoun</div>
  <div class="w3-col l2 m2 s2">Verb</div>
  <div class="w3-col l2 m2 s2"> </div>
  <div class="w3-col l2 m2 s2"> </div>
</div>
<div class="w3-row w3-center">
  <div class="w3-col l2 m2 s2 w3-aqua" style="height:158px"> <br> <br> <br><b>Question</b></div>
  <div class="w3-col l2 m2 s2 w3-yellow">Am</div>
  <div class="w3-col l2 m2 s2 w3-yellow">I</div>
  <div class="w3-col l2 m2 s2 w3-yellow">working?</div>
  <div class="w3-col l2 m2 s2 w3-yellow">Yes, I am.</div>
  <div class="w3-col l2 m2 s2 w3-yellow">No, I'm not.</div>

  <div class="w3-col l2 m2 s2 w3-indigo"> <br>Is<br> </div>
  <div class="w3-col l2 m2 s2 w3-indigo">He<br>She<br>It</div>
  <div class="w3-col l1 m1 s1 w3-indigo"> <br>working?<br> </div>
  <div class="w3-col l1 m1 s1 w3-indigo">No<br>-<br>Yes</div>
  <div class="w3-col l1 m1 s1 w3-indigo">he<br>she<br>it</div>
  <div class="w3-col l1 m1 s1 w3-indigo">isn't<br>-<br>is</div>
  <div class="w3-col l2 m2 s2 w3-indigo"> <br>working.<br> </div>

  <div class="w3-col l2 m2 s2 w3-red"> <br>Are<br> </div>
  <div class="w3-col l2 m2 s2 w3-red">We<br>You<br>They</div>
  <div class="w3-col l2 m2 s2 w3-red">We're not<br>You're not<br>They're not</div>
  <div class="w3-col l2 m2 s2 w3-red">We aren't<br>You aren't<br>They aren't</div>
  <div class="w3-col l2 m2 s2 w3-red"> <br>working.<br> </div>
</div>
<!-- end of third table -->

</body>
</html>
Link to comment
Share on other sites

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<!-- First table for positive form verb to be -->
<div class="w3-row w3-center w3-grey">
<div class="w3-col l2 m2 s2"> </div>
<div class="w3-col l2 m2 s2">Pronoun</div>
<div class="w3-col l2 m2 s2">To Be</div>
<div class="w3-col l2 m2 s2">Contraction</div>
<div class="w3-col l2 m2 s2">Verb</div>
<div class="w3-col l2 m2 s2"> </div>
</div>
<div class="w3-row w3-center">
<div class="w3-col l2 m2 s2 w3-blue" style="height:158px"> <br> <br> <br><b>Positive</b></div>
<div class="w3-col l2 m2 s2 w3-green">I</div>
<div class="w3-col l2 m2 s2 w3-green">am</div>
<div class="w3-col l2 m2 s2 w3-green">I'm</div>
<div class="w3-col l2 m2 s2 w3-green">working.</div>
<div class="w3-col l2 m2 s2 w3-white"> </div>

<div class="w3-col l2 m2 s2 w3-indigo">He<br>She<br>It</div>
<div class="w3-col l2 m2 s2 w3-indigo"> <br>is<br> </div>
<div class="w3-col l2 m2 s2 w3-indigo">He's<br>She's<br>It's</div>
<div class="w3-col l2 m2 s2 w3-indigo"> <br>working.<br> </div>
<div class="w3-col l2 m2 s2 w3-white"> <br> <br> </div>

<div class="w3-col l2 m2 s2 w3-red">We<br>You<br>They</div>
<div class="w3-col l2 m2 s2 w3-red"> <br>are<br> </div>
<div class="w3-col l2 m2 s2 w3-red">We're<br>You're<br>They're</div>
<div class="w3-col l2 m2 s2 w3-red"> <br>working.<br> </div>
<div class="w3-col l2 m2 s2 w3-white"> <br> </div>
</div>
<!-- end of first table -->
<!-- second table for negative form of verb to be -->
<div class="w3-row w3-center w3-grey">
<div class="w3-col l2 m2 s2"> </div>
<div class="w3-col l2 m2 s2">Pronoun</div>
<div class="w3-col l2 m2 s2">To Be</div>
<div class="w3-col l2 m2 s2">Contraction</div>
<div class="w3-col l2 m2 s2">Contraction</div>
<div class="w3-col l2 m2 s2">Verb</div>
</div>
<div class="w3-row w3-center">
<div class="w3-col l2 m2 s2 w3-aqua" style="height:158px"> <br> <br> <br><b>Negative</b></div>
<div class="w3-col l2 m2 s2 w3-yellow">I</div>
<div class="w3-col l2 m2 s2 w3-yellow">am</div>
<div class="w3-col l2 m2 s2 w3-yellow">I'm not</div>
<div class="w3-col l2 m2 s2 w3-yellow"> </div>
<div class="w3-col l2 m2 s2 w3-yellow">working</div>

<div class="w3-col l2 m2 s2 w3-indigo">He<br>She<br>It</div>
<div class="w3-col l2 m2 s2 w3-indigo"> <br>is<br> </div>
<div class="w3-col l2 m2 s2 w3-indigo">He's not<br>She's not<br>It's not</div>
<div class="w3-col l2 m2 s2 w3-indigo">He isn't<br>She isn't<br>It isn't</div>
<div class="w3-col l2 m2 s2 w3-indigo"> <br>working.<br> </div>

<div class="w3-col l2 m2 s2 w3-red">We<br>You<br>They</div>
<div class="w3-col l2 m2 s2 w3-red"> <br>are<br> </div>
<div class="w3-col l2 m2 s2 w3-red">We're not<br>You're not<br>They're not</div>
<div class="w3-col l2 m2 s2 w3-red">We aren't<br>You aren't<br>They aren't</div>
<div class="w3-col l2 m2 s2 w3-red"> <br>working.<br> </div>
</div>
<!-- end of second table -->
<!-- third table for question form of verb to be -->
<div class="w3-row w3-center w3-grey">
<div class="w3-col l2 m2 s2"> </div>
<div class="w3-col l2 m2 s2">To Be</div>
<div class="w3-col l2 m2 s2">Pronoun</div>
<div class="w3-col l2 m2 s2">Verb</div>
<div class="w3-col l2 m2 s2"> </div>
<div class="w3-col l2 m2 s2"> </div>
</div>
<div class="w3-row w3-center">
<div class="w3-col l2 m2 s2 w3-aqua" style="height:158px"> <br> <br> <br><b>Question</b></div>
<div class="w3-col l2 m2 s2 w3-yellow">Am</div>
<div class="w3-col l2 m2 s2 w3-yellow">I</div>
<div class="w3-col l2 m2 s2 w3-yellow">working?</div>
<div class="w3-col l2 m2 s2 w3-yellow">Yes, I am.</div>
<div class="w3-col l2 m2 s2 w3-yellow">No, I'm not.</div>

<div class="w3-col l2 m2 s2 w3-indigo"> <br>Is<br> </div>
<div class="w3-col l2 m2 s2 w3-indigo">He<br>She<br>It</div>
<div class="w3-col l1 m1 s1 w3-indigo"> <br>working?<br> </div>
<div class="w3-col l1 m1 s1 w3-indigo">No<br>-<br>Yes</div>
<div class="w3-col l1 m1 s1 w3-indigo">he<br>she<br>it</div>
<div class="w3-col l1 m1 s1 w3-indigo">isn't<br>-<br>is</div>
<div class="w3-col l2 m2 s2 w3-indigo"> <br>working.<br> </div>

<div class="w3-col l2 m2 s2 w3-red"> <br>Are<br> </div>
<div class="w3-col l2 m2 s2 w3-red">We<br>You<br>They</div>
<div class="w3-col l2 m2 s2 w3-red">We're not<br>You're not<br>They're not</div>
<div class="w3-col l2 m2 s2 w3-red">We aren't<br>You aren't<br>They aren't</div>
<div class="w3-col l2 m2 s2 w3-red"> <br>working.<br> </div>
</div>
<!-- end of third table -->

</body>
</html>


Edited by hikingwithu2
Link to comment
Share on other sites

hmm, no delete option on these posts. Anyway, I did find a couple issues and corrected those, but it still does not display properly on my phone.The problems are: no colors, and the entire thing is reduced to one long column.

Edited by hikingwithu2
Link to comment
Share on other sites

That last one still doesn't look right?

 

Anyway, does this work?

<!DOCTYPE html>
<html>
    <head>
        <title>Document Title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script src="http://www.w3schools.com/lib/w3data.js"></script>

        <script>
            $(function() {


            });
        </script>

        <style>
            .tablediv, .tablediv > div:first-child + div > div {display: flex;vertical-align: middle; text-align:center; }
            .tablediv > div, .tablediv > div:first-child + div > div > div {flex: 1 auto; vertical-align: middle;}

            .tablediv > div:first-child {height: auto !important;white-space: nowrap; word-break: break-all;}
            .tablediv > div:first-child::before {
                background-color: red;
                content: "";
                display: inline-block;
                height: 100%;
                vertical-align: middle;
                width: 0;
            }

        </style>
    </head>
    <body>
        <!-- First table for positive form verb to be -->
        <div class="w3-row w3-center w3-grey">
            <div class="w3-col l2 m2 s2"> </div>
            <div class="w3-col l10 m10 s10">
                <div class="w3-col l2 m2 s2">Pronoun</div>
                <div class="w3-col l2 m2 s2">To Be</div>
                <div class="w3-col l3 m3 s3">Contraction</div>
                <div class="w3-col l3 m3 s3">Verb</div>
                <div class="w3-col l2 m2 s2"> </div>
            </div>
        </div>
        <div class="w3-row w3-center tablediv">
            <div class="w3-col l2 m2 s2 w3-blue" style="height:158px"><b>Positive</b></div>
            <div class="w3-col l10 m10 s10">
                <div class="w3-col l12 m12 s12 w3-green">
                    <div class="w3-col l2 m2 s2">I</div>
                    <div class="w3-col l2 m2 s2">am</div>
                    <div class="w3-col l3 m3 s3">I'm</div>
                    <div class="w3-col l3 m3 s3">working.</div>
                    <div class="w3-col l2 m2 s2 w3-white"> </div>
                </div>
                <div class="w3-col l12 m12 s12 w3-indigo">
                    <div class="w3-col l2 m2 s2">He<br>She<br>It</div>
                    <div class="w3-col l2 m2 s2">is<!--<br> ;--></div>
                    <div class="w3-col l3 m3 s3">He's<br>She's<br>It's</div>
                    <div class="w3-col l3 m3 s3"> <br>working.<br> </div>
                    <div class="w3-col l2 m2 s2 w3-white"> <br> </div>

                </div>
                <div class="w3-col l12 m12 s12 w3-red">
                    <div class="w3-col l2 m2 s2">We<br>You<br>They</div>
                    <div class="w3-col l2 m2 s2">are<br> <br> </div>
                    <div class="w3-col l3 m3 s3">We're<br>You're<br>They're</div>
                    <div class="w3-col l3 m3 s3"> <br>working.<br> </div>
                    <div class="w3-col l2 m2 s2 w3-white"> <br> </div>

                </div>
            </div>
        </div>
        <!-- end of first table -->
        <!-- second table for negative form of verb to be -->
        <div class="w3-row w3-center w3-grey">
            <div class="w3-col l2 m2 s2"> </div>
            <div class="w3-col l10 m10 s10">
                <div class="w3-col l12 m12 s12">
                    <div class="w3-col l2 m2 s2">Pronoun</div>
                    <div class="w3-col l2 m2 s2">To Be</div>
                    <div class="w3-col l3 m3 s3">Contraction</div>
                    <div class="w3-col l3 m3 s3">Contraction</div>
                    <div class="w3-col l2 m2 s2">Verb</div>
                </div>
            </div>
        </div>
        <div class="w3-row w3-center  tablediv">
            <div class="w3-col l2 m2 s2 w3-aqua" style="height:158px"><b>Negative</b></div>
            <div class="w3-col l10 m10 s10">
                <div class="w3-col l12 m12 s12 w3-yellow">
                    <div class="w3-col l2 m2 s2">I</div>
                    <div class="w3-col l2 m2 s2">am</div>
                    <div class="w3-col l3 m3 s3">I'm not</div>
                    <div class="w3-col l3 m3 s3"> </div>
                    <div class="w3-col l2 m2 s2">working</div>
                </div>
                <div class="w3-col l12 m12 s12 w3-indigo">
                    <div class="w3-col l2 m2 s2">He<br>She<br>It</div>
                    <div class="w3-col l2 m2 s2"> <br>is<br> </div>
                    <div class="w3-col l3 m3 s3">He's not<br>She's not<br>It's not</div>
                    <div class="w3-col l3 m3 s3">He isn't<br>She isn't<br>It isn't</div>
                    <div class="w3-col l2 m2 s2"> <br>working.<br> </div>
                </div>

                <div class="w3-col l12 m12 s12 w3-red">
                    <div class="w3-col l2 m2 s2">We<br>You<br>They</div>
                    <div class="w3-col l2 m2 s2">are<br> <br> </div>
                    <div class="w3-col l3 m3 s3">We're not<br>You're not<br>They're not</div>
                    <div class="w3-col l3 m3 s3">We aren't<br>You aren't<br>They aren't</div>
                    <div class="w3-col l2 m2 s2"> <br>working.<br> </div>
                </div>
            </div>
        </div>
        <!-- end of second table -->
        <!-- third table for question form of verb to be -->
        <div class="w3-row w3-center w3-grey">
            <div class="w3-col l2 m2 s2"> </div>
            <div class="w3-col l10 m10 s10">
                <div class="w3-col l12 m12 s12">

                    <div class="w3-col l2 m2 s2">To Be</div>
                    <div class="w3-col l2 m2 s2">Pronoun</div>
                    <div class="w3-col l3 m3 s3">Verb</div>
                    <div class="w3-col l3 m3 s3"> </div>
                    <div class="w3-col l2 m1 s1"> </div>
                </div>
            </div>
        </div>
        <div class="w3-row w3-center  tablediv">
            <div class="w3-col l2 m2 s2 w3-aqua" style="height:158px"><b>Question</b></div>
            <div class="w3-col l10 m10 s10">
                <div class="w3-col l12 m12 s12 w3-yellow">
                    <div class="w3-col l2 m2 s2">Am</div>
                    <div class="w3-col l2 m2 s2">I</div>
                    <div class="w3-col l3 m3 s3">Yes, I am.</div>
                    <div class="w3-col l3 m3 s3">No, I'm not.</div>
                    <div class="w3-col l2 m2 s2"> </div>

                </div>
                <div class="w3-col l12 m12 s12 w3-indigo">
                    <div class="w3-col l2 m2 s2"><br>Is<br> </div>
                    <div class="w3-col l2 m2 s2">He<br>She<br>It</div>

                    <div class="w3-col l3 m3 s3">
                        <div class="w3-col l4 m4 s4"><br>working?<br> </div>
                        <div class="w3-col l4 m4 s4">No<br>-<br>Yes</div>
                        <div class="w3-col l4 m4 s4">he<br>she<br>it</div>
                    </div>

                    <div class="w3-col l3 m3 s3">isn't<br>-<br>is</div>
                    <div class="w3-col l2 m2 s2"><br>working.<br> </div>
                </div>

                <div class="w3-col l12 m12 s12 w3-red">
                    <div class="w3-col l2 m2 s2"><br>Are<br> </div>
                    <div class="w3-col l2 m2 s2">We<br>You<br>They</div>
                    <div class="w3-col l3 m3 s3"> </div>
                    <div class="w3-col l3 m3 s3">
                        <div class="w3-col l6 m6 s6">We're not<br>You're not<br>They're not</div>
                        <div class="w3-col l6 m6 s6">We aren't<br>You aren't<br>They aren't</div>
                    </div>
                    <div class="w3-col l2 m2 s2"><br>working.<br> </div>

                </div>
            </div>
        </div>
        <!-- end of third table -->

    </body>
</html>
Link to comment
Share on other sites

I discovered the problem - there is no device detection when a phone or tablet loads the page. I am using the LMS called ATutor. I have posted a message in their forums asking where in the LMS file I can insert custom headers. :( When I use this code in the LMS I cannot include anything above, and including, the <body> tag, therefore I cannot just insert the meta tag(s) in with the content code.

 

Here's the code, I wonder if somebody can test it on a tablet or phone and tell me if it actually displays correctly?

Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
  <title></title>
</head>
<body>
  <!-- First table for positive form verb to be -->
  <div class="w3-row w3-center">
    <!-- this is the first set of rows, but has to be w3-col to work -->
    <div class="w3-col l2 m2 s2 w3-green w3-leftbar w3-border-lime" style="height: 158px;">
      <strong>Positive</strong>
    </div>
    <div class="w3-col l10 m10 s10">
      <div class="w3-col l10 m10 s10 w3-yellow">
        <div class="w3-col s2">I</div>
        <div class="w3-col s2">am</div>
        <div class="w3-col s2">I'm</div>
        <div class="w3-col s2">working.</div>
        <div class="w3-col s2"></div>
			</div>
      <div class="w3-col l10 m10 s10 w3-indigo">
        <div class="w3-col s2">He<br>She<br>It</div>
        <div class="w3-col s2"><br>is<br></div>
        <div class="w3-col s2">He's<br>She's<br>It's</div>
        <div class="w3-col s2"><br>working.<br></div>
        <div class="w3-col s2"><br></div>
      </div>
      <div class="w3-col l10 m10 s10 w3-red">
        <div class="w3-col s2">We<br>You<br>They</div>
        <div class="w3-col s2"><br>are<br></div>
        <div class="w3-col s2">We're<br>You're<br>They're</div>
        <div class="w3-col s2"><br>working.<br></div>
        <div class="w3-col s2"><br></div>
      </div>
    </div>
  </div><!-- end of first table -->
<!-- Second table for negative form verb to be -->
  <div class="w3-row w3-center">
    <!-- this is the second set of rows, but has to be w3-col to work -->
    <div class="w3-col l2 m2 s2 w3-green w3-leftbar w3-border-lime" style="height: 158px;">
      <strong>Negative</strong>
    </div>
    <div class="w3-col l10 m10 s10">
      <div class="w3-col l10 m10 s10 w3-yellow">
        <div class="w3-col l2 m2 s2">I</div>
        <div class="w3-col l2 m2 s2">am</div>
        <div class="w3-col l2 m2 s2"> </div>
        <div class="w3-col l2 m2 s2">I'm not</div>
        <div class="w3-col l2 m2 s2">working</div>
      </div>
      <div class="w3-col l10 m10 s10 w3-indigo">
        <div class="w3-col l2 m2 s2">He<br>She<br>It</div>
        <div class="w3-col l2 m2 s2"><br>is<br></div>
        <div class="w3-col l2 m2 s2">He's not<br>She's not<br>It's not</div>
        <div class="w3-col l2 m2 s2">He isn't<br>She isn't<br>It isn't</div>
        <div class="w3-col l2 m2 s2"><br>working.<br></div>
      </div>
      <div class="w3-col l10 m10 s10 w3-red">
        <div class="w3-col l2 m2 s2">We<br>You<br>They</div>
        <div class="w3-col l2 m2 s2"><br>are<br></div>
        <div class="w3-col l2 m2 s2">We're not<br>You're not<br>They're not</div>
        <div class="w3-col l2 m2 s2">We aren't<br>You aren't<br>They aren't</div>
        <div class="w3-col l2 m2 s2"><br>working.<br></div>
      </div>
    </div>
  </div><!-- end of second table -->
<!-- Third table for positive question form verb to be -->
  <div class="w3-row w3-center">
    <!-- this is the third set of rows, but has to be w3-col to work -->
    <div class="w3-col l2 m2 s2 w3-green w3-leftbar w3-border-lime" style="height: 158px;">
      <strong>Positive<br>Question</strong>
    </div>
    <div class="w3-col l10 m10 s10">
      <div class="w3-col l10 m10 s10 w3-yellow">
        <div class="w3-col l2 m2 s2">Am</div>
        <div class="w3-col l2 m2 s2">I</div>
        <div class="w3-col l2 m2 s2">working?</div>
        <div class="w3-col l1 m1 s1">Yes,</div>
        <div class="w3-col l1 m1 s1">I'm</div>
        <div class="w3-col l2 m2 s2">working.</div>
      </div>
      <div class="w3-col l10 m10 s10 w3-indigo">
        <div class="w3-col l2 m2 s2"><br>Is</div>
        <div class="w3-col l2 m2 s2">he<br>she<br>it</div>
        <div class="w3-col l2 m2 s2"><br>working</div>
        <div class="w3-col l1 m1 s1"><br>Yes,</div>
        <div class="w3-col l1 m1 s1">he's<br>she's<br>it's</div>
        <div class="w3-col l2 m2 s2"><br>working</div>
      </div>
      <div class="w3-col l10 m10 s10 w3-red">
        <div class="w3-col l2 m2 s2"><br>Are</div>
        <div class="w3-col l2 m2 s2">we<br>you<br>they</div>
        <div class="w3-col l2 m2 s2"><br>working?</div>
        <div class="w3-col l1 m1 s1"><br>Yes,</div>
        <div class="w3-col l1 m1 s1">we're<br>you're<br>they're</div>
        <div class="w3-col l2 m2 s2"><br>working.</div>
      </div>
    </div>
  </div><!-- end of third table -->
  <p></p><!-- fourth table for negative question form verb to be -->
  <div class="w3-row w3-center">
    <!-- this is the fourth set of rows, but has to be w3-col to work -->
    <div class="w3-col l2 m2 s2 w3-green w3-leftbar w3-border-lime" style="height: 293px;">
      <strong>Negative<br>Question</strong>
    </div>
    <div class="w3-col l10 m10 s10">
      <div class="w3-col l10 m10 s10 w3-yellow">
        <div class="w3-col l1 m1 s1">Am</div>
        <div class="w3-col l1 m1 s1">I</div>
        <div class="w3-col l2 m2 s2">working?</div>
        <div class="w3-col l1 m1 s1">No,</div>
        <div class="w3-col l3 m3 s3">I'm not</div>
        <div class="w3-col l2 m2 s2">working.</div>
      </div>
      <div class="w3-col l10 m10 s10 w3-indigo">
        <div class="w3-col l1 m1 s1"><br><br>Is</div>
        <div class="w3-col l1 m1 s1"><br>he<br>she<br>it</div>
        <div class="w3-col l2 m2 s2"><br><br>working?</div>
        <div class="w3-col l1 m1 s1"><br><br>No,</div>
        <div class="w3-col l3 m3 s3">he's not<br>he isn't<br>she's not<br>she isn't<br>it's not<br>it isn't</div>
        <div class="w3-col l2 m2 s2"><br><br>working.</div>
      </div>
      <div class="w3-col l10 m10 s10 w3-red">
        <div class="w3-col l1 m1 s1"><br><br>Are</div>
        <div class="w3-col l1 m1 s1"><br>we<br>you<br>they</div>
        <div class="w3-col l2 m2 s2"><br><br>working?</div>
        <div class="w3-col l1 m1 s1"><br><br>No,</div>
        <div class="w3-col l3 m3 s3">we're not<br>we aren't<br>you're not<br>you aren't<br>they're not<br>they aren't</div>
        <div class="w3-col l2 m2 s2"><br><br>working.</div>
      </div>
    </div>
  </div><!-- end of third table -->
</body>
</html>

Link to comment
Share on other sites

You do realise you are using only 10/12ths of columns in a 10/12th column and in couple of rows, 10/12ths of columns of a 10/12th column of 10/12th column row?

 

If you use a 10/12 column, the total columns in that, to use full width of that column must total up to 12 not 10.

Link to comment
Share on other sites

Correct me if I'm wrong, but doesn't the column count below equal 12?

<div class="w3-col l2 m2 s2 w3-green w3-leftbar w3-border-lime" style="height: 158px;">
      <strong>Positive</strong>
    </div>
    <div class="w3-col l10 m10 s10">
      <div class="w3-col l10 m10 s10 w3-yellow">
        <div class="w3-col s2">I</div>
        <div class="w3-col s2">am</div>
        <div class="w3-col s2">I'm</div>
        <div class="w3-col s2">working.</div>
        <div class="w3-col s2"></div>

I see col-2 (green), plus the following 5 cols which are all 2, for a total of 12. Is this not correct?

Link to comment
Share on other sites

Sibling elements

W3-col = 100%, w3-col.n2 (where 'n' equals l, m or s) will equal 2 of 12(16.33% of 100).

W3-col = 100%, w3-col.n10 (where 'n' equals l, m or s) will equal 10 of 12(83.66% of 100).

Total 100%

 

Direct child element of w3-col.n10 using same

W3-col = 100%, w3-col.n10 (where 'n' equals l, m or s) will equal 10 of 12(83.66% of 100).

Total 83.66% of total 100% width.

 

5 sibling children of above parent will equal 10, the same as w3-col.n10 which equals again 83.66% total of 100%, meaning you are losing 16.33% of total available width each time.

 

You always need a total of 12 grid columns to fill 100 percent column width no mater what the parent grid width is.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...