I've searched for this topic, I am sure there is a solution out there but I'm not looking for the right thing...
I am using a customized version of Twitter Bootstrap 2.x (Fluid Responsive) with top and bottom full-width fixed navigation bars and Fancybox 2.1.4
<meta name="viewport" content="width=device-width, initial-scale=1.0">
bootstrap.min.css
bootstrap-responsive.min.css
modernizr-2.6.2-respond-1.1.0.min.js
jquery.fancybox-media.js?v=1.0.5
jquery.fancybox.css?v=2.1.4
jquery.fancybox.js?v=2.1.4
Anyways, my problem is occurring while using fancybox. All of my fancybox content is using iframes (even the content without iframes appears to do the same thing but i figured i would include that).
When you click on a link the fancbox box appears on the screen and then the parent window produces a scrollbar (behind the fancybox). It isn't hurting anything but it just looks tacky. I am producing HTML5 content to go in a kiosk so I do not want scrollbars to appear.
You just need to set the overflow:hidden on the div with the scrollbar when you click on the link. Never really used jfiddle, but according to that just over riding the class in the fancybox css will do the trick.
Throw this in one of your custom css files:
.fancybox-lock .fancybox-overlay { overflow:hidden; }
make sure to load your custom css after you load the fancybox css so yours takes precedence.
Be careful with this, because if one of the pictures you are overlaying is extermely tall (taller than your current window view) then you won't be able to see the whole image.
You can use some javascript to resize the image according to the height of the window if this is a pressing issue.
Related
i have a container div with height: 100% and body too.
I did that to make it fit the window size, that said, i don't want my page to resize vertically (content going up when resizing) but only horizontally by triggering media queries.
One issue resulting from that is, virtual keyboard poping up on mobile pushes the content up and the layout of the page gets messy.
Ps: i have the viewport meta tag added to the document
<meta name="viewport" content="width=device-width, user-scalable=no">
If you go fullscreen with sections you will inevitably face issues with different mobile screens and tablets. I've never been a fan of full height pages since they cause alot of trouble with content.
What you can do is set a small height breakpoint and turn the page to height: auto; when the keyboard opens.
I'm using Yahoo's PureCSS library along with a plugin for the sidebar and it works great on all browsers except mobile Safari. For some reason, it zooms out whenever the menu is opened. This even occurs in the documentation's example. I have no idea what could be causing this but it's tempting to just call it a browser bug.
I can put together a JSFiddle if necessary.
The viewport meta tag does not contain a maximum scale value. If you update the viewport tag to the following, you won't get the same zooming whenever the user clicks on the menu:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Note the addition of maximum-scale=1 to the end of the string. When this is added, the content slides over instead of zooming out. This was tested against the PureCSS demo page for the Responsive Side Menu, linked to above.
This question actually boiled down to being the same as Does overflow:hidden applied to work on iPhone Safari?. I guess Mobile Safari will zoom out to make room for the menu and the content area when the user opens the menu, unless you do this on a wrapper element:
html,
body {
overflow-x: hidden;
}
I have a slideshow on my homepage that scales to 100% width. It works perfectly on my computer (I can even resize my browser windows all the way down, in both Firefox and Safari, and it works great) but it doesn't work on my iphone (it stays too wide and adds a lot of blank space to the right of the page content).
The slideshow is an iframe. I've tried scaling the iframe with html, putting it in a div and scaling the div with css, and I've tried this: http://css-tricks.com/snippets/html/responsive-meta-tag/, but nothing seems to be working. Does anyone have any ideas I can try?
Thanks!!
website: www.silvervinedesign.com
You have pixel widths defined for the styles of this element. Therefore, it won't be responsive.
If you inspect the source of this iframe (right click and choose "Inspect Element"), you'll find that the <ul> element containing the images is getting a style="width: 4778px;" applied to it. Each <li> child is also getting an explicit pixel width style applied. When I view the source of the iframe, these style tags are not present there.
That tells me you've got some javascript function which is setting this width. Looking at your source, I'm guessing the plugin responsible is galleria, but it's hard to tell.
I'm building a test mobile website for a client: http://preview.stafforce.co.uk/mobile/
As you can see, upon the loading the website on a mobile device or on the desktop using the correct viewport size you will see a red box with three options. The red box is the page itself told be red by a class of splash. (I had originally had this as a separate DIV that sat ontop of the page using position fixed, but that had several issues with positioning).
On the desktop this works fine, but on the mobile device e.g. iPhone using Safari when the toolbar disappears and/or you scroll/change orientation you get a black bar, this is because the body is appearing as the div is not taking up the full size of the screen (jq mobile uses min-height which is done using the framework to make this happen).
Any ideas on how to fix this? Or had similar issues? Also noticed when doing the transitions that they appear cut off in places again likely attributed to this min-height not getting things correct.
Example:
Edit: The reason I have changed the body to black is because when you do the flip transitions, this is what you see behind, and black is the correct colour for the background when doing transitions on phones such as the iPhone.
You should use Jquery mobile enhanced 'listview' and keep your content in DIV with data-role='content'.
Jquery mobile will make your content fullscreen.
You should not style listview or anything else manually.
Here is the demo: http://jsfiddle.net/nachiket/YSp3x/
I haven't set icons and your logo, but you will get idea.
If possible use Jquery mobile Theme Roller for base styling, and do customizations on top of it.
EDIT:
You can set color on div which has data-role="page".
Like:
.myPage {
background-color:#ff0000;
background-image:none;
}
And in HTML
<div data-role="page" class="myPage">
I have already updated jsfiddle link.
I recently built a site and centered it using margin: 0 auto. I also wrapped elements in a .wrapper class with a width set to 960px and then had the parent element extend across the whole browser.
When I view the Brands screen on an iPad though, the site is left-aligned and does not extend across the whole window. Any thoughts to why this might be happening, and how to correct it?
See below for a screenshot:
Looks like you’ve got a few validation errors on that page:
http://validator.w3.org/check?uri=http://www.propet.com/brands/&charset=(detect+automatically)&doctype=Inline&group=0
I suspect they might be causing the issue. If you look at the page in e.g. Chrome, you’ll see a horizontal scrollbar and space outside your wrapper <div> there, so the issues aren’t limited to the iPad.
This works for a centered webpage with a width of 1024px:
<meta name="viewport"
content="width=device-width, initial-scale=0.95, maximum-scale=0.95">