Databases
StackOverflow2013
Postsdbo
POHover problems on iPhone/iPad
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHover problems on iPhone/iPad
    text
    copied!<p>I've just changed the layout of my site and I'm having a few issues - I've got a stylesheet for iPhone that i'm selecting with the following:</p> <pre><code>&lt;link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="scripts/page-phone.css" /&gt; </code></pre> <p>I'm having an issue with accessing some links on iPhone - I think it's due to some rogue CSS, but I'm having a bit of a problem tracking it down - In the normal CSS I have the following code:</p> <pre><code>.griditem { position: relative; display:inline-block; margin-right: 17px; margin-bottom: 17px; background-color: #777; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; width: 480px; height: 271px; text-align: left; } .titles { padding: 0px; bottom: 0px; position: absolute; left: -1px; right: -1px; top: -1px; -moz-border-radius: 1px 1px 0 0; border-radius: 1px 1px 0 0; text-align: center; display: none; background: rgba(0, 0, 0, 0.5); -moz-border-radius: 1px 1px 0 0; border-radius: 1px 1px 0 0; vertical-align: middle; } .griditem:hover .titles { display: block; text-decoration: none; } .titles a:link { text-decoration: none; }​ </code></pre> <p>and in my 'Phone' CSS -</p> <pre><code>.griditem { position: relative; display:inline-block; margin-right: 17px; margin-bottom: 17px; background-color: #777; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; width: 480px; height: 271px; text-align: left; } .titles { padding: 5px; position: absolute; bottom: 0px; left: -1px; right: -1px; background: transparent url(../images/layout/white80.png) top left; -moz-border-radius: 1px 1px 0 0; border-radius: 1px 1px 0 0; text-align: left; } .titles a:link { text-decoration: none; } </code></pre> <p>The HTML is as follows:</p> <pre><code>&lt;a class="griditem" href="video.php" style="background-image:url(image.jpg); background-size:100% 100%;"&gt; &lt;img src="spacer.png" width="100%" href="video.php" alt="Title" /&gt; &lt;div class="titles"&gt; &lt;div class="gridholder"&gt; &lt;h5&gt;Title&lt;/h5&gt; &lt;h6&gt;Subtitle&lt;BR&gt;+&lt;/h6&gt; &lt;/div&gt; &lt;/div&gt; &lt;/a&gt; </code></pre> <p>For some reason though on the phone the links don't work(!) - I've been looking at this problem that I can't see the obvious - Any ideas from looking at the code?</p>
 

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