I made this little web gallery
http://chocochomp.com/
and I have two main problems:
On my old Android 2.3 feature phone web browser (the one delivered with the phone), the divs are not wrapping properly.
Actually, the different LI blocks are left floating like a stair to the right of the page without never wrapping.
The other problem is perhaps a bit more fancybox 2 related.. so, no need to answer this part:
On smartphones, the fancybox 2 popup gallery is not centered on the screen but on the page!
problem: when the page has a big height, the gallery doesn t appear on the screen..
Here is the source code: https://github.com/mime29/Choco
Thank you for you help
Related
First, hello to everyone, I'm kinda new here, altough this site has helped me with lots of stuff.
Here's my problem, I've made images in 's with text behind them, so that when you hover with your pointer over it, the image slides to the side and you can read the text. Pretty simple. Now the problem that I'm having is that when I lower the screen size(eg view it on an Android), the responsive design kinda doesn't work for those images because there's some weird spacing to the left, even though the image can fit on that screen size.
Here's the site with the problem (I use it for learning purposes :)): This
your responsive works fine (bootstrap I guess). The problem is you have a fixed width in your .slide1, .slide2, .slide3 that is messing the 33.3333% width of your col-sm-4 . Basically you need to use mediaqueries to adapt your animation.
adding overflow:hidden to col-sm-4 will show you better what is happening, and adding to your slides max-width:100% may be the first steps to fix your web. Later your problem will be the image size
I'm not a web developer. I'm budding games developer.
I'm making this website to show off my portfolio.
I think its looking good in all the pc browsers I tried.
It should look like this
But in chrome and firefox on android, the block of text in the top right is rendered in a massive size font which makes that div huge and pushes everything down.
Now, Originally there was the mainpage html file with the sitemap + that paragraph, and the individual bits about my projects, for instance 'artefact', were seperate pages loaded into an iframe.
I noticed that, the lower paragraph in the iframe was fine even though the div is the same class as the problematic one above.
Heres what Ive tried so far..
I made that p a new class and defined its text size explicitly
I put the entire website in another iframe. strangely didnt make any difference
I put that pargraph in a li in a ul
I put all the text in that paragraph in a span
I changed the text from a p to a h7
The android browser is still picking up on it and making the text huge, and not the one below..
In firefox it seems this is being caused by 'font inflation' and I can get around it by changing firefoxes settings. But why is it only inflating one paragraph and ignoring the other?
Please note. I have done everything in this site in pixels and not % or em.
If I can just get android to not blow up that one paragraph it'll be fine.
I have actually discovered a good solution to this..
Add this line to your css..
html * {max-height:1000000px;}
Fixes it on chrome and firefox on android anyway.
You can read more about it here.
Discovered it on this stackoverflow question
We have a think called Font Boosting, it is designed to make text that is hard to read on a mobile device more readable. You can't really get around it other than to create a mobile optimised site by including the mobile viewport meta tag <meta name="viewport" content="width=device-width"> this will turn off the font-boosting, but it will mean the width of the screen is measured in CSS pixels at about 480px on a Nexus4.
I'm having an issue with an AppMobi app: HTML5 and CSS on a WebKit browser concerning horizontally scrollable jQuery UI Tabs.
You can see an example here:
http://keith-wood.name/uiTabs.html#tabs-one-line
If you view that on your Android phone (at least when I do it with my Galaxy S3) you can see them, they scroll back and forth just fine, but none of the tabs are clickable. I'm having exactly the same issue in my app so it's a fine example.
The problem doesn't occur on my iPhone 5, and it's not a problem on Android if the screen is large enough that they don't need to scroll.
Anyone know of a way to achieve clickable tabs in this situation? I've added position: relative; on the containing elements, and it works better now, but if it is scrolled all the way to the right, it still doesn't work, but will now work if it's anywhere except all the way to the right. Weird.
Thanks!
I have a very weird problem that is not consistent. I have a header in my webview page that is regular html from my site. The images are linked to pages. Sometimes the links don't work and sometimes they do. If I move my finger below the image, sometimes you see the rectangular highlight press color box show up but way off from the actual image. It will just be in a random spot but always below the image somewhere. So the link href and the image are getting out of sync per say. If I reload the page it will be in the correct position again and the image/button works. It doesn't always happen. Works fine in desktop and mobile browsers. Just weird in webview. Anyway, have a suggestion or experience this and why its so random?
Use it like this
String s="<head><meta name=viewport content=target-densitydpi=medium-dpi, width=device-width/></head>";
webview.loadDataWithBaseURL(null,s+htmlContent,"text/html" , "utf-8",null);
For more reference
http://developer.android.com/guide/webapps/targeting.html
And in Samsung s3 like phones, sometimes this will not work .For that create a separate layout for xhdpi phones and change the webview's height to 40dp or something depending on your requirement for avoiding white space.
The problem wasn't with just webview it is mobile in general, specifically Android Browser which I believe webview uses. My header was position:fixed and after a lot of research I found that position:fixed is glitchy on mobile and causes weird things to happen. This was causing the clickable location of the links getting out of place when you scrolled even though the images never moved. So when you clicked on the image/link it didn't work because the location of the link was somewhere else on the page, usually under the image somewhere.
As noted on this blog solution which described my issue.
http://suratpyari.wordpress.com/2011/09/30/fixed-position-problem-with-android-webkit/
However the solution I went with was not to use position:fixed at all as I didn't want css hacks and to use the solution used at the SO link below using position:absolute to make the inner div scrollable. It actually works quite well and the scrolling is even more smooth and fluid now.
CSS 100% Height, and then Scroll DIV not page
So anyone else that may have this problem, it might be your fixed header. And it is "real" problem for the person who down voted my question. :/
I'm working on a project where I have a stationary bar (to become nav bar), and then directly below it is a rectangle which is setup so that when you click it, it flips over. The width of both the nav and the flipping div are supposed to be the exact same, and they are when viewed in FF, Chrome, Safari, IE...but when I just checked it in the Android browser, the flipping div is about 10 px less in width than the nav bar. I've narrowed this down to the fact that I'm using 'display: table' in the div 'outerContainer' to vertically and horizontally center the contents of 'innerContainer' (which is set to be display: table-cell). This is an example of how I currently have it setup, which displays correctly in all browsers but the width of the flipping box is less in Android browser: http://jsfiddle.net/adRP4/9/
As soon as I remove the 'display:table' from .outerContainer, it displays in the Android browser at the proper width, however the content is no longer centered as I want it. This example shows the display: table removed will the proper width displaying, but the content not centered as I want it: http://jsfiddle.net/adRP4/10/
The vertical/horizontal centering method I used is based on: http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html (similar to http://css-tricks.com/vertically-center-multi-lined-text/) ... when I tried changing it to the method outlined her: http://css-tricks.com/centering-in-the-unknown/ I ran into all kinds of problems...
Any suggestions on how to fix this?
UPDATE (6/28)--I discovered that when I check an iPhone, I have the exact same width mismatch as in the Android browser..
Thanks,
Mark
I'd suggest to use a DIV for the flip, and then, adding a div filling the flip and set as TABLE.
Or I suggest using the floater in the method 3 here : http://blog.themeforest.net/tutorials/vertical-centering-with-css/