Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><strong>Temporary solution:</strong> I replaced the inline-block with float, and applied some of the solution from <a href="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/" rel="nofollow">this</a> site. However, I changed stuff like @media (max-width: 800px) to @media (max-width: 50em).</p> <p>This is better but not yet optimal, because I still have to add a lot of @ media for a large range of devices. There is also a potential problem with fitting content(text) to the tiles, but I guess I can somehow use calc() to proportion the font-size inside the tiles to the tiles itself.</p> <p>Working example (experimental - the point is that the tile size depends on both font-size and screen-width):</p> <pre><code>&lt;html&gt; &lt;style&gt; body { margin: 0; padding: 0; color: red; } .tile { float: left; position: relative; width: 20%; padding-bottom: 20%; } .content { position: absolute; left: 0.5em; right: 0.5em; top: 0.5em; bottom: 0.5em; background-color: #000; } @media (max-width: 50em){ .tile{ width: 50%; padding-bottom: 50%; } } &lt;/style&gt; &lt;div class=tile&gt; &lt;div class = content&gt; yay &lt;/div&gt; &lt;/div&gt; &lt;div class=tile&gt; &lt;div class = content&gt; it &lt;/div&gt; &lt;/div&gt; &lt;div class=tile&gt; &lt;div class = content&gt; works! &lt;/div&gt; &lt;/div&gt; &lt;div class=tile&gt; &lt;div class = content&gt; Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. &lt;/div&gt; &lt;/div&gt; &lt;div class=tile&gt; &lt;div class = content&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=tile&gt; &lt;div class = content&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=tile&gt; &lt;div class = content&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=tile&gt; &lt;div class = content&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=tile&gt; &lt;div class = content&gt; &lt;/div&gt; &lt;/div&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload