hikingwithu2 Posted August 24, 2016 Share Posted August 24, 2016 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 More sharing options...
dsonesuk Posted August 24, 2016 Share Posted August 24, 2016 The third table columns don't add up to 12 grid system, but 10 or 11. Link to comment Share on other sites More sharing options...
hikingwithu2 Posted August 24, 2016 Author Share Posted August 24, 2016 (edited) <!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 August 24, 2016 by hikingwithu2 Link to comment Share on other sites More sharing options...
hikingwithu2 Posted August 24, 2016 Author Share Posted August 24, 2016 (edited) 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 August 24, 2016 by hikingwithu2 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 24, 2016 Share Posted August 24, 2016 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 More sharing options...
hikingwithu2 Posted August 26, 2016 Author Share Posted August 26, 2016 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 More sharing options...
dsonesuk Posted August 26, 2016 Share Posted August 26, 2016 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 More sharing options...
hikingwithu2 Posted August 26, 2016 Author Share Posted August 26, 2016 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 More sharing options...
Ingolme Posted August 27, 2016 Share Posted August 27, 2016 No, because they're at different nesting levels. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 27, 2016 Share Posted August 27, 2016 (edited) 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 August 27, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now