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.
Related
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
Has anyone ever tried to convert a site to mobile, and come across a gap in the page which they can't seem to either find or remove?
Usually this is either a clear or a float problem, but in this case I can't find at all. It only seems to appear on mobiles. Might anyone be able to help? Thanks in advance :)
http://dev.ioncamera.com/
Are you referring to the basket and language elements? If so its probably because the width of all of the elements across the header are larger than the window width. Try amending the width of the elements with media queries when the screen size falls below a certain width...
#media(max-width: 350px){
selector{
attribute:rule
}
}
Julian - thanks for your answer. The problem was with viewport. This wasn't in the script:
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
Once I put that in, the screen displayed as intentional on mobiles and iPads. Beginner stuff, but sometimes you forget the basics :)
i have created a responsive page with bootstrap 3. I am having a problem in all mobile devices, there is long scroll bar coming. Strange thing is it is coming fine in my local machine. Issue is only reproducible in production environment. I have tried every thing but nothing worked.
Using meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">
This issue is making me insane, i am not getting the cause of this issue.
Below is the page url
http://beta.proptiger-ws.com/careers
Even if i remove the entire body tag in consle panel the scroll bar still comes. Let me know if you guys need any other detail.
I am updating this question my new finding are this page is not becoming responsive thats why the scrollbar is coming. dont know what is wrong with the viewport meta as same page working fine on my local machine.
That site is not responsive if you have set widths
Search for the class below and change.
#media (-webkit-min-device-pixel-ratio: 1) and (max-width: 768px)
.mainContainer, .footer-container, .footer-cont-info, .copy-container, .searchFilter {
width: 100%;
}
Be sure to do a hard refresh when editing in external css files (ctrl + F5)
Check the css for min-width.
If there is any element with min-width greater than the page then it would produce a scrollbar.
I'm using Zurb Foundation and am getting a strange bug on the iPad. The defect occurs when I start in landscape view, focus on a text input, and then rotate the device from landscape to portrait.
The viewport is set to:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
When I view the DOM in web inspector, the glitch area to the right is not represented at all. I've tried to put an overflow-x: hidden; on the html and body elements, but still no luck. I'm not sure if it's a me issue, Zurb issue, or iPad issue. Any advice would be greatly appreciated.
Try adding this CSS to the containing form:
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
If that doesn't do it, try moving those rules to the form's parent, etc.
This fixed a similar issue I had relating to bits of form fields not being redrawn correctly. Hacky workarounds like this make me love webdev so so much!
I just had the same issue. It's a bug with iPad's (maybe all of iOS) that when the page is smaller than the window/viewport and you have the keyboard open while rotating... it doesn't know how to handle it. Haha.
Here's how I fixed mine with jQuery
jQuery(function($) {
var iPad = navigator.userAgent.toLowerCase().indexOf("ipad");
if(iPad > -1) {
$('body').css({'min-height':($(window).height())});
}
Fixed it on mine. No more weird black box or broken looking page. Let me know how it goes for you!
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.