So I have a weird space issue in one of my divs, but only when viewing on Android webkit browser 533.1 (newest versions of webkit android browsers don't have the issue). The issue doesn't appear anywhere else, not on desktop, newer mobile devices or browsers. Etc. Only old android stock browser.
Here is the web page. The div in question is the div with the phone number and address (toward bottom of screen, underneath facebook and twitter icons).
I figure it would be easier for you to go there and use firebug to look at the code, but if needed I can post some code here. There is just a ton of css (multiple media queries).
Here is the code for the div. The spacing occurs before the very first element in the div:
<footer class="hideForDesktop" id="ont_foot">
<div id="footer_div">
<p id="number">909.390.3092 </p>
<p> 1155 S. Wanamaker Ave, Ontario, CA 91761</p>
<div id="bottom-mob-nav">
<!-- navigation module -->
<nav id="ontario_nav2">
<ul>
<li class="here"><a title="Scandia Home" href="/ontario/index.php">Home</a></li>
<li><a title="Scandia Rates & Hours" href="/ontario/rates_hours.php">Rates & Hours</a></li>
<li><a title="Get Directions to Scandia" href="/ontario/directions.php">Directions</a></li>
<li><a title="Rides, Games, & Fun" href="/ontario/attractions.php">Attractions</a></li>
<li><a title="Throw Your Party at Scandia!" href="/ontario/parties.php">Parties</a></li>
<li class="show"><a title="Bring your group party to Scandia" href="/ontario/group_events.php">Group Events</a></li>
<li><a title="Educational tours at Scandia!" href="/ontario/education.php">Education</a></li>
</ul>
</nav>
</div>
<div id="end">
<p class="boring">© 2014 Scandia Family Fun Center</p>
<p class="boring">Prices, terms and conditions subject to change without notice. Some rides may be closed during inclement weather.</p>
<div id="otherLocs">
<ul>
<li class="grey">Ontario</li>
<li>Sacramento</li>
<li>Victorville</li>
</ul>
</div>
<div id="other">Other locations</div>
</div>
</div>
</footer>
I've tried setting the div#footer_div height to both auto and initial with no luck.
Screenshot:
So I found a fix, not sure if it's the best way, but it works. I validated a bunch of problems in the HTML, but that didn't get rid of it. I put borders around all the divs and found the div that was causing the gap. I then deleted all the content from the div and found that it still had height (equal to the size of the gap. So in the CSS I set the div height to 0. This got rid of the gap, then I just had to restyle a couple of things in my CSS to make everything look the way it was and it worked.
If you look at my original post, the div that was causing the problem was footer#ont_foot.
Related
I'm at a loss here. Viewing my image gallery from the desktop everything works like a charm. However when I view it from my phone to test the responsiveness my image links are only clickable in the top right corner. I changed the resolution of my browser(desktop) and got the same results. All of my CSS for the gallery is standard bootstrap CSS.
Here is a visual of the approximate area that I can click in responsive view:
And when I inspect my source code my hyperlink covers my image:
And the markup of my image links:
<div class="col-lg-3 col-md-4 col-xs-6">
<a class="thumbnail" href="http://example.com/h/500/w/800/a/c/thumb/img/gallery/18FT_Wide_Oil_Filters_2014/18_wide_oil_3.jpg" data-toggle="lightbox" data-gallery="18FT Wide Oil Filters 2014" data-title="18FT Wide Oil Filters 2014">
<img class="img-responsive img-protected" src="http://example.com/h/250/w/400/a/c/thumb/img/gallery/18FT_Wide_Oil_Filters_2014/18_wide_oil_3.jpg" alt="18FT Wide Oil Filters 2014">
</a>
</div>
Here is a Bootply of my entire gallery page. If you resize the page to where there are only 2 images on each column then you will get the same result I am getting.
change your this div
<div class="col-lg-12">
<h4 class="page-header"><span class="glyphicon glyphicon-picture"></span> Wind Tower Hubs 2014</h4>
</div>
to
<div class="col-xs-12 thumb">
<h4 class="page-header"><span class="glyphicon glyphicon-picture"></span> Wind Tower Hubs 2014</h4>
</div>
I am having a problem on android and iPhone versions of HTML5 site using responsive layout.
links are not firing unless I hold down on them for 1 second.
Otherwise they act as if a hover event was taking place.
Example code:
<div class="homepageCarDiv">
<div class="note">
<div class="imgDiv">
**<img src="_imgup/19/thumbnail/Imagen_2.jpg" alt="">**
</div>
<h3>MITSUBISHI ASX<br>ASX 200 DI-D CHALLENGE 4WD (2010)</h3>
<h4>16.500€</h4>
<div class="verDet">
<p>**Ver Detalle**</p>
</div>
<div class="cornerImage">
<img src="images/fold.png" alt="">
</div>
</div>
</div>
Code can be seen at http://20coches.com/index.php.
It works correctly on iPad and desktop.
I am at a loss.
This issue was related to responsive divs and focus rectangles being pushed out of the viewport.
Other sources on the internet suggest that javascript calculations of the dynamic element width causes a silent mouse fail on hover, which results in the link not firing.
I just got tired of beating my head against the VDU, and managed to work around the issue - by clearing every div from its neighbour.
I am developing a hybrid mobile app for Android. I am using jquerymobile 1.2.0 as the framework. I want to have my header and footer fixed while the contents in the body segment will be scrolling vertically for which am using the data-role="listview".
But the problem is the header and the footer are also scrolling up with the body scroll.
My Notes
My Queries
eLearning
Assignment
Media
Broadcast
<div data-role="content">
<ul data-role="listview" class="ui-listview">
<li>
<img src="images/noprofileimg.jpg" />
<h3>Indraneel Roy <small>says</small></h3>
<p >Friday, October 8, 2010 <span class="ui-li-count">2</span></p>
<p>#abir kab h freshears ???</p>
</li>
</ul>
</div><!--end of body container-->
Copyright © company name 2012-2013.All Rights Reserved.
Can you please tell me where or what am I doing wrong
Did you disable viewport scaling? It's one of the most common issues in Android that makes position:fixed not working... e.g.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
also check out this excellent but 8 years old post regarding android HTML5 scrolling issues:
https://bradfrost.com/blog/mobile/fixed-position/
But first add correct viewport meta tag to the head section of your html and see if this helps..
I'm trying to do a slide transition but all I see is a fade. Slide works on a Chrome browser but it does not work when loaded onto the phone.
<body onload="onLoad()">
<div data-role="page" id="index">
<div class="fixed-top-bar" data-role="header">Title1</div>
<div class="body-container" data-role="content">
<div class="container">
<ul>
<li>page</li>
<li>World</li>
<li>This</li>
<li>Is A</li>
<li>List</li>
</ul>
</div>
</div>
<div data-role="footer"></div>
</div>
<div data-role="page" id="second">
<div class="fixed-top-bar" data-role="header">Title2</div>
<div class="body-container" data-role="content">
<div class="container">
<ul>
<li>page</li>
<li>World</li>
<li>This</li>
<li>Is A</li>
</ul>
</div>
</div>
<div data-role="footer"></div>
</div>
</body>
There is the body of my html. currently do not have any custom js. Anyone know why I'm not seeing a slide transition?
Edit: I am having this problem on an Android 2.3.6 device. Motorola Atrix 4G to be exact.
Edit: I tried playing around with other transitions other than slide. None of them seem to work. It only gives me a fade.
Edit: I tested my code on iOS and it seems to work just fine. Not sure why it isn't working on Android.
I missed out one very important piece of information on the JQuery Mobile website.
To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support (such as Android 2.x) will fallback to "fade" for all transition types. This behavior is configurable (see below).
That pretty much answers the question...
I have the following HTML, mostly generated on the fly using JS, as a dynamic popup that appears when you click in several points on a map.
<div class="bubble">
<span class="topPaisCont"></span>
<span class="globalContent">
<h1>ASIA</h1>
<div class="contPais">
<a href="#" target="_blank">
<img src="images/flags/asia.png" style="visibility: visible; "> Asia
</a>
<br>
<!-- A few more <a>s with the same structure -->
</div>
</span>
<a class="close"></a>
</div>
I'd post an image but it seems I can't since I'm a new user...
The scrollable list of links is rendered correctly in most PC browsers and also on the iPhone and iPad, where it can be scrolled swiping one or two fingers.
However, I can't make it work on Android, where it can't be scrolled down.
Can you help with this? Is it the way it's implemented?
I can post the CSS if needed.