I built my second responsive site and I'm having an issue with scrolling on mobile. I've only checked a blackberry z10 so far but I've checked more than one of them. I've checked it on web inspect through the phones browser and I've also deleted each element and still no scrolling. Maybe someone can see what I'm obviously missing. Thanks in advance.
Remove float: left; on mobile screen for .movies. Then the height of the <body> tag will be calculated correctly.
Related
We have a responsive website which has a search field element showing at the very top centered horizontally. When you reduce the screen resolution to that of a tablet or mobile phone, the search field element disappears completely although if you inspect the code, the code is still there but the code is slightly greyed out and i guess this means it is disabled and therefore not shown.
How do i get this code to show in the tablet and mobile phone resolutions. How do i have this code not greyed out?
Viewing your CSS would help, but it looks like .header is set to display: none; or something similar in your CSS.
Had spent many hours try to figuring out what makes content wrapper not working.
The site is here:
http://bit.ly/19dWUf
html structure contains header, content and footer.
Its looks good when accessing using firefox, google chrome in dekstop by resizing the window to emulate mobile view.
The problem
When accessing using mobile devices the content section is right aligned, header n footer looks fine.
since it looks good on firefox and usually use firebug to debug,
it's hard to find what makes problem in real mobile device.
i m using Opera Mobile emulator to check the display..
any opinion appreciated. or is there any firebug/similar tools for testing mobile?
Thank you
Your section#content-wrapper gets margin-left and margin-right of 30px upon page load.
Either remove
jQuery('#content-wrapper').css({
'margin-left':'30px',
'margin-right':'30px'
});
from jquery.custom.js (line 332), or change it to
'margin': '0 auto'
I'm at the very start of creating a clients website, however i've already hit a stumbling block; i am trying to add a ribbon type look to the navigation in Wordpress, however whenever i add a padding or margin to the navigation (namely .menu ul), on iOS devices like the iPhone and iPad, the right side of the ribbon extends across the screen further than it should.
Any idea as to what is causing this?
Site in question: http://site.n8geeks.com
Edit: I changed the width of the .menu ul - It appears when i add a pixel value, it is interpreted differently in iOS browsers, however when i add a percentage value it seems fine on iOS. Any ideas why this is?
Edit2: Now the issue is that the top part of the ribbon doesn't show on the right hand side on iOS devices (the bit that 'bends behind' the page). Any help?
Thanks.
For those who may have a similar issue to me in the future, the problem was that Safari was taking the parent wrapper and resizing it to fit the screen. Fixing this involved adding a new wrapper that was bigger than the #page wrapper.
I have a "simple" web application that has a navigation and a content area.
Within the content area I have a iframe with more complex content. Unfortunately the content in the iframe has another iframe.
The get an overview look here:
.
In my scenario it is quite helpful to see the full iframe content, so we hide the navigation and change the content size on top of it:
If I go back now to initial view the iframe inside the iframe doesn't change the size:
This happend only on Safari mobile (iPad) OS 5.1. On normal Safari browser it works as expected.
Does anyone have a similar problem or an idea what is happening here?
Of course a solution would be even better :)
If this is an issue that only occurs in Safari or iPad you could add some cross-browser CSS support to tell the specific browser how it should appear. I like using this one
This allows you to add specific css instructions such as
.[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]
.iphone.safari .scrollingframe {css style}
Hope this helps.
We have developed a small control that is always meant to be at the bottom of the screen on out site. However when I view the site on the ipad the control does not stick to the bottom it floats in the middle.
Whats the deal with fixed position on the ipad? Is it not possible?
Does the ipad use safari mobile?
I think you should read this.
Since iOS 5.0, position:fixed is also implemented on the iPad: http://caniuse.com/css-fixed, though there are other problems, see Disable scrolling when changing focus form elements ipad web app .
Fixed header/footers for mobile devices are tricky. Using fixed positioning doesn't work as explained in the article posted to this thread by Knu.
I've found two solutions that should provide some relief. One is with jquery mobile and the other is iScroll. Both allow for fixed footer/headers.
My problem is that I'm having a hard time combing the fixed scrolling with other effects in the iPad. I hope this helps.