View Single Post
Old 03-22-2024, 05:52 AM   #4
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,117
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
I think they are talking about empty cells <tr><td></td></tr> interspersed in the table to allow splitting. If I were to use that technique I would give the empty tr a class with a height of zero or something so it doesn’t look wonky.

However….

I’ve tried doing the two-column thing and never got it to work reliably. Divs and/or tables worked fine on a LARGE display but failed miserably on a phone. My recommendation would be to use queries in your css. If the device supports multi-columns css and has a big enough display use the columns css. Otherwise, just use css to style it how you wish, like a newspaper article for example, (font, alignment, indent, etc. ) but only a single column. The user still gets the feel of reading the news and can actually read it.

EDIT:

Here is an example of what I was talking about. Yes, Jon, this is an example of the css...we know you would change it to something else...

Code:
CSS:
div.news         {margin:2em 1em}
div.news p       {font-family:serif; font-size:.8em; text-align:justify; text-indent:0}
div.news p.title {font-weight:bold; text-align:center; font-variant:small-caps}

@supports ("column-count") {
   @media (min-width=800px) {
    div.news {column-count: 2;
              column-gap: 10px;
              column-rule: 1px solid black}

    div.news p.title {column-span: all}
   }
}

HTML:
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>

<div class="news">
   <p class="title">Title of the Article</p>
   <p>This is a news paragraph.</p>
   <p>This is a news paragraph.</p>
   <p>This is a news paragraph.</p>
   <p>This is a news paragraph.</p>
</div>

<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
Depending on the device (eg. OLD ADE) you may need to put your queries on a separate css page. Some of those devices ignore the entire css page if it doesn't like anything on it...which is against the standard. In that case make sure you link the queries page AFTER the normal css... so it has higher priority.

Last edited by Turtle91; 03-22-2024 at 08:48 AM.
Turtle91 is offline   Reply With Quote