I've developing a store on eBay and having trouble with it on iPhones...
It seems to be nicely responsive in a normal browser, but when I view it on an iPhone it only takes up about half of the screen...
Is there something I'm missing?
The URL is http://stores.ebay.co.uk/the-biggest-toy-store
I've added a viewport tag like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Thanks!
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
in your index.html page and it should work
A few things I noticed in your site, remove the min-width: 760px from your .stBadge (in your media query only). That will help get the footer within the screen boundary. There is also some kind of border up top that has a wider-than-screen width, possible the #gh-top div... but that may be fixed once the other is.
Related
I'm using bootstrap to make a web site. On the browse everything is ok, but on the mobile(Iphone 5c) the carousel grows and shrinks. I tryed to fix the size of the carousel on many sizes like 320px, 480px, etc and add .img-responsive class.
Did you set <meta name="viewport" content="width=device-width, initial-scale=1"> inside of the <head> tag in your html?
You need to do the pevious to ensure proper zooming on mobile devices.
Source
I'm trying to figure out why this http://mobile.kendallarneaud.me/mobile/wemusic/#player is displaying as if it is "zoomed out" as to fit all in the mobile browsers?
Can anyone give me some insights? I don't want that it should give me a much normal scaling...
http://kendallarneaud.me/mobile/wemusic/#player seems to show it at normal scale
you seem to be missing this very important line, which is step 1 for responsive design:
<meta name="viewport" content="width=device-width, initial-scale=1">
https://github.com/h5bp/html5-boilerplate/blob/master/index.html#L8
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport">
to be able to see all the important stuff, on normal desktop, a windows width is always 1000px or more, but on iphone, i like to make sure the screen is 1000px minimum width
is it possible to do that ?
the site that cause problem is : http://www.benoitjacquesdesigner.com/index.html
look at the text on top, it cut .... or explaint to me the white right band (missing background)
--
sub question, is there a place where i can learn by myselft all the mobile trick and tips... i often go to w3school, but people tell some bad stuff about this site...
iOS products(so does most Androids) have min-width as 600px, and making it so, will work.
research on media queries
Try
<meta content="minimum-scale=1.0, width=device-1000, maximum-scale=1.0, user-scalable=no" name="viewport">
OK, with some testing that work : <meta name="viewport" content="width=1200">
This is how the site I'm putting together should look:
GB Personal Training
This is what it looks like on the iPhone:
iPhone Browser
As you can see it pushes in the #wrap and #outer-wrap DIVs, so that the background images in them have a right margin and I don't know why. I only have access to the custom.css file and not the HTML.
I'm currently editing a clone of it at:
gbptclone.live.subhub.com/
Define max-width in your body. Write like this:
body {
min-width: 1000px;
}
add this inside your HTMLhead:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Actually this will prevent the user to zoom the content (wich sucks, from an user end experience):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Instead, in my opinion (and I am no guru), you should use:
<meta name="viewport" content="width=1000px">
Try setting a width for #outer_wrap and #wrap (you probably want 100%).
It looks like Mobile Safari is expanding the size of the #visual-portal-wrapper div, which isn't enough because Safari resizes text for iPhone display. You can change this with -webkit-text-size-adjust: none; but that would make the links rather undersized for iPhone users. That's why it fits in a normal browser but not in Mobile Safari.
Changing the width of the divs should stop them from having content expand beyond their edges (they're 974px by default because that's what #visual-portal-wrapper is, but all the contents overflow and cause the visual errors) and have the background images appear cut off. You might also want to add background positioning for #outer_wrap since it appears slightly off on the screenshot from what I'm seeing in Firefox.
Edit: Alternatively, you could try changing the width: 974px; on the #visual-portal-wrapper div to min-width: 974px;, of course making sure you account for IE's problems with min-width).
I'm editing our News site's mobile CSS file. On the iPhone 3gs, 4 & simulator there are some pages (not all) there is an extra right margin.
Here's an example of a page WITH the extra margin:
http://bit.ly/mMA2q7
..and here's an example of a page without it:
http://bit.ly/iQeOGY
Both pages are using the same template. I'm guessing the images are adding the extra margin.
Here is our mobile CSS file http://bit.ly/iW5JVm and viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1;"/>
I tried applying different min-width values to the body but haven't found a solution.
Do you know how to get rid of this extra margin on the iPhone?
your photobanner div is too wide. It gets set to 500px which is way too much :)
try to add width:auto!important to it :)
Same problem, I fixed it adding this code in header:
<meta name="viewport" content="width=1100" />