iOS Positioning fix - javascript

I've been editing a site for a friend, updating it etc, I changed an old Flash script slideshow to a JS one.
It runs fine, but when loaded into an iPhone/iPod, the entire section containing the slideshow & text loads incorrectly, underneath the Left Panel, instead of next to it.
The site loads fine on several Android devices, & PC browsers.
Any ideas on what's wrong/how I can fix it?
http://www.stonehouserestaurant.com.au
Thanks, Matt.

The footer of the right side is longer on the mobile website than on the browserwebsite. That's why it's floating under the left side.

Give the html a max width:
html {max-width: 1024px;}
Though it will look like it should you still have amount of space...scroll..i think you should check your whole content to see whats happening..

Related

CSS properties not working on certain mobile devices

This has been happening to me quite frequently and its driving me nuts. I make my website, It's completely responsive on desktop, I looked at the responsive toggle in chrome dev-tools and mozilla dev-tools. Everything is fine. I go to publish my site, everything looks good, I check the site on my phone and tablet and those are fine too. Now if my friend who has a different phone or tablet try's to access it, the images are either stretched or squeezed and do not follow the CSS properties I gave them. I have no idea why this is happening and haven't been able to find a solution yet. Any help would be greatly appreciated.
(This is not a media query issue It's mainly images getting distorted, but only on select screens)
not sure if this would help, try giving fixed width & height for small images other than header or banner images and include them in flexbox. Header or Banner images will more or less will get trimmed with respect to mobile layout.

Google Chrome loads site left aligned then after a few seconds it's normal?

So I'm working on my web design company website and I'm having a glitch that only happens on Google Chrome.
Glitch
When you load any page on my website
sneakypandastudios.com
right in the beginning for a few seconds some elements are loaded left aligned then it transitions to it's normal position. It's makings for really unclean transitions from page to page and I really need it fixed.
I think it has to do with Javascript because If I disable it on my website all the elements are displayed in the wrong position before the normal transition. I really need help with this so if anyone can help me you will be amazing!!
Thanks so much.
Glitch Example
Normal Load Look

Fixed position not working on ios devices

I am working on implementing a couple of instances of http://amsul.ca/pickadate.js/ but i seem to be running into a couple of problems with the css. If you view the above site on an ipad or iphone, the calendar is positioned correctly, as the container covers up the window as a good fixed position element should do. But if you were to see my site, and pull up the calendar, then you would see the calendar container (the greyed out background) starting from the bottom left corner of the input that it is next to (as if it were positioned relative) and extending with the same dimensions of the window. In addition to this, when I inspect in mobile safari's web inspector on my mac, the blue box, which usually indicates where the div is being positioned is fixed to the top of the document and not necessarily the window.
The only error I'm getting are a 404 from a stylesheet that has nothing to do with this plugin.
here are 3 screenshots of the problem that i am facing, the first has shows the input that the div with the calendar is just after
http://www.dumpt.com/img/viewer.php?file=rvipsnuyfyuv8u6xt5dr.png
the second is where inspector seems to think it is rendering and you can see the translucent background further down the page
http://www.dumpt.com/img/viewer.php?file=nc7el13lcthqlzrsfarg.png
and the third shows that it seems to be the correct dimensions and everything, but the calendar does not seem to be positioning itself correctly
http://www.dumpt.com/img/viewer.php?file=8hbswbfv9abwobkth8iq.png
If anyone has any ideas about why this might be I would love to hear them because right now, i'm at a loss.
EDIT
This page has been tested on android devices and works perfectly.
Ok, so it seems that mobile does not support fixed elements very well.
http://www.quirksmode.org/m/css.html
Search: fixed
which is really unfortunate. If anyone has any workarounds for this, that would be really great.

Tabber widget overlapping other content on sidebar in IE

I've implemented the following tabbed widget in the sidebar of my blog (Blogger hosted): http://mylpgb.blogspot.com/2013/04/how-to-add-5-tabbed-widget-for-blogger.html
It works just fine in Chrome and Firefox (the submit box is a bit wonky in Firefox, but whatever), but in Internet Explorer, I've got some problems. When the content under a tabber tab gets a little long, it overlaps the other gadgets on my sidebar. Actually, it looks like the rest of the gadgets/content are properly pushed down, but the image directly below the tabber just gets run over. There's nothing special about that image--it's just a simple image tag.
I tried setting the table height to 100%, but no dice. I'm kind of learning as I go, so I'd be very grateful for any troubleshooting tips. Thank you.

jquery mobile web app leave empty white space at page bottom

I have a web app (i used JQM) currently customized to iphone.
all elements are fitted to the page height, but i'm getting a white space on the page bottom.
when viewing the page on pc browser everything is fine, so i guess the problem is related to the iphone screen resolution configuration on some CSS file.
Please view the web page on your iPhone to see the white space (scroll down):
http://aspspider.org/elimiz/check4/MC_v1.0.htm
Help me
I'm not seeing the issue on my iPhone but it sounds like a problem I had on a site.
I fixed it by setting a wrapper surrounding all the content as overflow: hidden. It might take some trial and error to find which element to put this on, and you might need to define height values on elements that dont have height explicitly stated.

Categories