Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h2>Scrolling Doesn't work:</h2> <p>Have you wondered why?</p> <p>Because of this line of code: </p> <pre><code>position: fixed; </code></pre> <p>Why does this make scroll stop? Actually its not stoping the scroll, but instead the position of it is locked! The scoll is working, when you have a look at the scroll bar, but the image's position is fixed. You can use <code>position: absolute</code> to minimize this effect. </p> <h2>50% width for images:</h2> <p>When you use <code>50%</code> width for the images, you are actually letting the image have the 50% width of the <strong>nearest parent element</strong> with some width. For example: </p> <pre><code> &lt;div class="someclass"&gt; &lt;img src="link/to/file.png" alt="photo" /&gt; &lt;/div&gt; .someclass { width: 500px; } </code></pre> <p>Now when you set image with to <code>width: 50%;</code> it will fill 50% of the div; that's its parent. If you have not set any, then the body will be filled with 50%. And so on.</p> <h2>The only issue that I found was:</h2> <p>The <code>position: fixed</code>. This was causing some issues, and one is nonscroll-ness, actually it is scroll, you can try giving a gradient background to the page, and when you'll scroll you'll see the changes! </p> <h2>Make some changes in your CSS:</h2> <pre><code>#u1760_img { height: auto; width: 50%; float: right; z-index: 1; left: 0; position: fixed; margin: auto; top: 135px; } #u1765_img { height: auto; width: 50%; float: left; right: 0; text-align:right; position: fixed; margin: auto; z-index: 1; top: 135px; } </code></pre> <p>Instead of this, try using this: </p> <pre><code>img { width: 50%; // set the width position: absolute; // but still, its not the only way to position images top: 135px; } </code></pre> <p>Note that I have not specified some CSS properties, why? <code>z-index</code> isn't necessary unless you have some elements which you want to overlap. So you won't require this one. </p> <p>Secondly, I have not set height to auto, because browser will do that for us automatically :)</p> <p>You are making a hell lot of other assumptions too, such as <code>text-align</code>, <code>float: left</code>, <code>right: 0;</code>. Try avoiding them in the beginning. </p> <p>When you'll set image's width to 45%, the next image will come just infront of the first image so you won't have to write classes for each of them and the browser will automatically fit the images there for you! </p> <h2>Not sure, but still have this too</h2> <p>I am not sure whether you want this or not, but still I am going to write for information.</p> <p>You can use <strong>media queries</strong> to create dynamic pages that would work on mobiles, like a mobile version of your website. You can also try using <code>width: 50%</code> (which you actually are) to make the browser always fit the image in it when it is resized down.</p> <h2>References:</h2> <p><a href="http://css-tricks.com/css-media-queries/" rel="nofollow noreferrer">http://css-tricks.com/css-media-queries/</a></p> <p><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries</a></p> <p><a href="https://stackoverflow.com/questions/3797395/resize-images-using-in-css">resize images using % in css</a></p> <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/position</a></p> <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/z-index" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/z-index</a></p>
    singulars
    1. This table or related slice is empty.
    1. PO50% Width Responsive Design Issue
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USAfzaal Ahmad Zeeshan
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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