I've been trying to make a custom lockscreen work with the iPod Touch 4G. It works quite well, but for some reason it sets the wrong body size. Normally, the body size will fit in the size of the screen but when I move the lockscreen (I move the lockscreen to unlock) I can clearly see 'body spaces' near the bottom and right edge of the lockscreen. In this case it's colored black because I set the body background-color to black. I tried setting the body size manually but it doesn't have any effect.
Here you have the complete code, although note that it works perfectly fine with a PC screen.
Here's another WP7 lockscreen which doesn't have this issue. Maybe you can find something particular in the CSS that might solve the problem. BTW, the three folders in next to the html/js are irrelevant, but just so you have the full theme.
I don't see you using the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
There are variations of that. For further explanation: David Calhoun
You tried to reset the css? It's probably a browser issue of padding or margin...
I cant really test, but try do add the reset.
You can search on google or use this one: http://meyerweb.com/eric/tools/css/reset/
Set your image to display:block - an image is an inline element by default, and will be affected by setting your body to font-size:50px.
Related
I have problems using the meta tag width="device-width" because the page loads zoomed in on mobiles.
After checking with the inspector I realized the site container has the "wrong" size on mobiles: even though in the CSS the width is set to 100% (I've also tried "width:auto;") the container is clearly just about 30% wide.
What could be the reason for this problem? Could it be just a missing or some sort of syntax error in the code? Or an issue when loading js modules?
first, make sure you added this line in the head
<meta name="viewport" content="width=device-width, initial-scale=1.0">
second could you please share the container class code to figure out what is the main problem
Hi thanks for the quick replies.
I had a min-width in relative (rem) units which caused the problem. I was confused as to the "relative" of rem units, and did not realize that they are only relative to a fixed quantity (the room em size).
I have a custom wordpress theme and I've been trying to debug this issue for days but can't figure it out. Would greatly appreciate your guys help!
On mobile devices - portrait view, the body isn't full width. On desktop browsers it works fine, even when you reduce the browser width to the same size as a mobile device.
Screenshot from my iphone -
Mobile screenshot
I already have this tag in the head -
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
My site - laxgoalierat.com
Edit: As you see the page initially loads on the mobile device with full width however then it adjusts to what is seen in the screenshot.
I've tried playing around with the body CSS. Making body position:fixed makes it expand the full width however then I cannot scroll up and down :(
I'm out of other ideas. Let me know if providing any other details would help.
Thanks in advance, Damon
Your offending HTML seems to be coming from elements similar to this:
<div class="yui-skin-sam avpcw_container">...</div>
I don't know what these are or what they do... But they are the reason for the effects you are seeing.
So a quick and dirty approach would be to apply css to hide either or both of these classes to patch over your problem. For example:
.yui-skin-sam {
display: none;
}
Obviously you need to be sure that hiding these classes is appropriate. I had a quick look to try to work out what they are used for; but didn't get anywhere.
I have set up a mobile web site of http://www.berlin-ra-kanzlei.de/ ... but for an unknown reason it always seems to be zoomed in just A LITTLE BIT (maybe 1 - 3%?). There is always missing some milimetres of the right side and I can zoom out with a pinch.
It also happens, when I am on the site and clicking another page. It just does not want to show the complete page from the beginning, although I have set the boxes to width: 100%;.
Btw, I have set
<meta name="viewport" content="width=device-width, initial-scale=1">
Without it my layout goes bananas on mobile devices and setting it to a lower initial-scale does not help either. There is till missing a little bit on the right side.
But I do not want to forbid zooming! I just want to have it all seen on initial loading/visiting.
So, I think it has to do with some CSS values or so. Maybe I have set something over 100% width or so? Because if I zoom/pinch out after loading, it works just fine ... until loading another page of the web site, of course.
Thanks a lot in advance, mates.
Set your box model for the the #container and #header divs to border-box:
box-sizing: border-box;
You may need to prefix this depending on what browsers you are supporting.
More info here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Apologies in advance for the rudimentary nature of this CSS question.
I'm trying to figure out how to deal with widths in CSS. I have an absolute positioned <div> containing a fairly wide table. The <div> is "1300px" in width. Everything works fine on desktop browsers. People with high resolution monitors see the entire table. Those with low resolution, or those who are viewing the page from a smaller browser window, are able to horizontally scroll the div to see the entire content. All is good.
But something different happens on the iPad2 (Safari) which has a native resolution of 1024px. I expected the iPad to show the first 1024px of content and allow the user to horizontally scroll (swipe?) to see the remainder of the table. Instead, it seems to be trying to cram the entire 1300px into the 1024px screen and then shrinking the type to make everything fit.
What's the standard way of using CSS to tell the iPad browser to show whatever it can at it's native resolution (i.e. 1024) and then allow the user to swipe/scroll horizontally if he wants to see the rest? A small snippet of code would be helpful.
Thanks.
By default iOS Safari will scale down any page to fit the screen. If it's not your desired behavior you can instruct the browser via meta viewport tag in the <head>.
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
Edit: more in-depth explanation: http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/
I don't have an iPad so I can't see, but a few points:
Your xhtml is not valid. <center> doesn't exist anymore (and by the looks of things isn't actually needed in the design anyway), also you should specify the dimensions of any the header image in px.
Don't know why you're using margin:auto on anything other than the mainwrap. Try margin:0; instead.
Try adding * {margin:0; padding:0} to the top of your stylesheet, and then adding in any extra padding and margin you need later - this will more or less set all browsers to the same starting point when it comes to layout.
If you don't want a border use {border:none} (if you say border: 0px solid; some browsers will still try and draw something)
This might not fix the problem, but it will be step in the right direction as the more valid your markup is the easier browsers find it to render.
Try removing width:100% from any of the parent element, then try to fix it.
Hope that it works for you.
I'm trying to implement a responsive navbar. It seems to work, but when the screen gets smaller, there appears a gap on the right side. See screen shot:
I haven't written any CSS. All of this is pure Bootstrap still.
Update 1: jsFiddle
http://jsfiddle.net/BaR3q/ - It's doing it on JSFiddle, too. So either I did something wrong (likely) or Twitter messed up (unlikely). what to do?
There is nothing in the markup that specifies that the elements should expand to fill the viewport. Adding body { width: 100%} will take care of it, or optionally overriding the width of the navbar to be auto.
Twitter Bootstrap is intended to be scaffolding and components rather than an out of the box solution, so this is likely one of those things that needs to be specified. The static version of the navbar is likely written so that it can be easily used in containers other than the body and this happens to fall in the 20% of situations where it needs a nudge.
A few potential reasons come to mind, but as others have pointed out it's difficult to say without seeing code. I'll add, though, that I understand how tough it can be to share enough of your code for something like this without giving too much away. So here are some questions (and for this specific issue, you shouldn't use .container-fluid as previously suggested. that probably won't work anyway, and if it does it's only masking a problem that might compound):
did you change any responsive styles? If so, did you change the width, padding, or margins on .container?
Did you apply a width or margin to the .navbar itself somewhere in the responsive styles? This seems a likely cause to me.
What about <body>, did you set padding on that?
I solved this problem by adding (either) one of the following meta tags:
<meta name="viewport" content="initial-scale=1">
<meta name="viewport" content="user-scalable = no">