Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You should use <a href="http://www.w3.org/TR/css3-mediaqueries/" rel="nofollow">media queries</a> and percentage widths .. </p> <p>That way you can define in the media queries how many columns you want by specifying the width of the child elements (<em>in percentages that add up perfectly to 100%</em>), and by making the images be <code>width:100%</code> inside those elements you make them auto scale..</p> <p><strong>Demo at</strong> <a href="http://jsfiddle.net/gaby/Yz7mf/1/" rel="nofollow">http://jsfiddle.net/gaby/Yz7mf/1/</a><br> (<em>fullscreen at <a href="http://fiddle.jshell.net/gaby/Yz7mf/1/show/light/" rel="nofollow">http://fiddle.jshell.net/gaby/Yz7mf/1/show/light/</a></em>)</p> <p>So for a structure of </p> <pre><code>&lt;div id="container"&gt; &lt;div class="item"&gt;&lt;img src="http://lorempixel.com/200/150/city/1" /&gt;&lt;/div&gt; &lt;div class="item"&gt;&lt;img src="http://lorempixel.com/200/150/city/2" /&gt;&lt;/div&gt; &lt;div class="item"&gt;&lt;img src="http://lorempixel.com/200/150/city/3" /&gt;&lt;/div&gt; &lt;div class="item"&gt;&lt;img src="http://lorempixel.com/200/150/city/4" /&gt;&lt;/div&gt; &lt;div class="item"&gt;&lt;img src="http://lorempixel.com/200/150/city/5" /&gt;&lt;/div&gt; &lt;div class="item"&gt;&lt;img src="http://lorempixel.com/200/150/city/6" /&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>You can use a Css of</p> <pre><code>#container{ overflow:auto; } #container &gt; div{ float:left; } #container &gt; div &gt; img{ width:100%; display:block; } @media screen and (max-width:400px){ #container &gt; div{ width:50%; } } @media screen and (min-width:401px) and (max-width:600px){ #container &gt; div{ width:25%; } } @media screen and (min-width:601px){ #container &gt; div{ width:20%; } } </code></pre> <p>This means that when the browser has width up to 400px use 2 columns, for width between 401px and 600px use 4 columns and for widths larger than 600px use 5 columns.</p>
    singulars
    1. This table or related slice is empty.
    1. POMake image div's with overlays fully responsive?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USGabriele Petrioli
    1. USGabriele Petrioli
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POMake image div's with overlays fully responsive?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COYes thanks but this is not addressing my problem with the hidden div/overlay, I can get the images to do this no problem but it does not function right when I have the overlay as is in my jsfiddle examples in my question. Let me know if you can introduce the overlays into your example and I'm sold.
      singulars
      1. PO
      1. USmatt
    2. CO@matt, if you make the `.item` in my example to be `position:relative` that you can add another div inside it that is `position:absolute` with top/left/right/bottom being 0, so that it fills its container, and inside it you can put the caption.. see ***http://fiddle.jshell.net/gaby/Yz7mf/5/show/*** and ***http://jsfiddle.net/gaby/Yz7mf/5/*** (*i have used some transitions to showcase some of the effects, but i have only included the standard syntax.. you might want to add vendor specific prefixes to make it work across the browsers..*)
      singulars
      1. PO
      1. USGabriele Petrioli
    3. COThanks a bunch, but my problem is I want the overlay to be another image, or go from grayscale to color...would that still work even having another image in the 2nd div?
      singulars
      1. PO
      1. USmatt
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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