I have a pretty weird issue that I can't replicate/ it's hard to debug. Basically I center my header on the screen with
#media screen and (min-width: 1023px)
<style>
.NavBarMain_container__1eIjT {
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
When I click on on a different page it stays exactly as it is as it should. My manager has the exact same chrome version and has gone into incognito as well and his is shifting by a couple pixels, but the layout tool in inspector is showing exactly the same things. I can't really debug anything because I am seeing something different than him.
What would you recommend to do? I think I can't use margin auto which is really strange. I have never had an issue like this before:
Version 85.0.4183.121 (Official Build) (64-bit)
Never solved why this is a bug but to get around it I used flex instead. Flex relies on margin so not sure why it acts any different. I did a bunch of screen shares and we had the same code when it was margin auto
I'm in the process of making my wordpress website responsive. I have two images on the page I'm working on which I want to set a max-width on of 100% to make them responsive (this is what I did on another website I made and it worked beautifully). However, I have noticed that as I shrink the page in Chrome dev tools the <html> and <body> elements are shrinking to really odd sizes, completely unrelated to the viewport size. Below are screenshots of the and elements, respectively, being hovered over in chrome dev tools:
And, of course since max-width with a percentage value, "Defines the maximum width of the containing block" and the containing blocks here (<html> and body) are resizing themselves in this unusual way, when I set the images to max-width: 100% they base that off the weird size of those elements.
The only CSS I have on these elements is:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
So my question is, where on earth are the <html> and <body> elements getting their size from?
This behavior first began happening a few versions ago in Chrome; try testing your site/screens using FF (Moz/Firefox) responsive dev tools -- my guess is you'll see the results you expect. But this isn't necessarily an issue with Chrome; in my case it has something to do with environment. These days I work mostly with AEM and if I test in auth mode/disabled (or straight-up auth mode) this issue will occur. But if I view the same page live in production = no issue. So my guess (for us at least) is that it has something to do with the CMS or the server setup. I tend to use FF responsive dev tools these days -- give that a try and let us know how you make out.
html, body{
margin: 0; padding: 0; width: 100%;
height: 100%;
overflow-x: hidden !important;
}
Check to see that your zoom level is set to 100% (normal), in your browser.
I just manage to fix the same issue.
The problem is that the text forces the viewport width. You just have to ajust the font size to fix the issue.
I have been asked to find if there is a quick way to force our mobile web application to be displayed on desktop web browsers. This is a stopgap-measure until we have the time and resources to finish work on responsively rendering correctly on larger-than-mobile devices.
The first thing I thought of for desktop-ifying our mobile webapp was to pull the mobile site into an iFrame and force a width and height (414x736 for now). I was hoping that by doing so, the CSS media selections would honor a 414px width, but that is not happening.
If I dump the width of the viewport to the console, it is in fact showing a width of 414px, but as you will see from the screenshots attached it's clear that the CSS media selections are not honoring a 414px width.
Here is what we want to see (this is just a screenshot of Chrome's debugger in iPhone 6 device mode):
Here is that same view rendered into an iFrame whose width and height have been set to 414 and 736 respectively. The frame size is perfect and functions just as I want, but the CSS media selections are borked:
I'd be willing to bet that this solution is specific to our webapp and might not work across the board, and this solution was not perfect.
The developer who originally implemented this webapp (in React/Redux) leaned on the CSS and graphics assets of a previous iteration of the webapp. I'm not sure why, but the webapp itself has a global 50% scale applied to the viewport like this:
<meta name="viewport" content="width=device-width, initial-scale=0.5">
By applying the following styling to my iFrame...
...
.force-mobile {
width: 750px;
max-width: 750px;
height: 1334px;
margin: 0 auto;
border-style: none;
border-color: inherit;
border-width: 0px;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
display: block;
}
...
<body>
<iframe id="forceMobile" class="force-mobile" src="http://myhost/mobile/"></iframe>
</body>
... I got the following result:
This is actually functional, although there are positioning issues, and issues with offsets into image maps (the missing hamburger menu icon is caused by this). It is going to require walking through the whole app and figuring out corrections to each individual piece, but this approach got me to a functional posture, so I'm happy with it for now.
I will keep this updated as I continue making progress.
Can you manipulate the user agent string to fool your app into sending the mobile version, as described in this article?
https://www.howtogeek.com/139136/how-to-access-mobile-websites-using-your-desktop-browser/
I am creating a responsive website, and have just noticed a strange behaviour in my content pages when viewed on the iPhone. It scales correctly when loaded in portrait mode, and also when rotated to landscape. However, when rotating back to portrait the page seems to shift left, or not zoom correctly, and there is a strip of white space down the right-hand side. This white space also seems to be present on first loading in portrait as the user can swipe the page left
Rather than complicating the explanation any further, here's a link to a sample page where this behaviour is occurring. Have a look on an iPhone, then have a look at the home page which does not have this issue.
If you need to see anything further, just me know :)
Fixed it! The issue was coming from one particular div - to find it, it was a process of deleting the different elements until the issue went away.
To fix it I needed to add overflow-x: hidden to that div and it sorts it out! Hope this is useful to others with a similar issue.
I had the same problem, I fixed it by setting:
html, body { width:100%; overflow:hidden; }
This problem occurs when width of any division is greater than the width of iPAD's screen.
In my case, some divisions were having size of 1000px, so I just went for width:auto and it works. overflow-x:hidden also does the same thing, but is not a preferred way.
I don't have an iphone to test this on but I have come across something similar with websites I've created in the past. In my case its because there was a bug in safari mobile that messed with the scale when going from port to land.
The following code fixed it for me (can't remember where I got it from at the moment)
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
Using "overflow-x: hidden" solves part of the problem, but screws the scroll, acting with strange behaviors (as Jason said).
Sometimes, the hardest part is to discover what is causing the problem. In my case, after a few hours, if found that the problem was in Twitter's Bootstrap:
If you're using Twitter's Bootstrap with "control-group" zones for your forms, the problem could be there. In my case i solved the problem with:
.control-group .controls {
overflow-x: hidden
}
Now the white space on the right was gone :)
I'd like to add to Navneet Kumar's solution because it worked for me. Any div tag styled with width=100% cannot also have left or right padding. The mobile browsers (I noticed the problem on iPhone and Android devices) interpret the div as having a width greater than 100%, thereby creating the extra space on the right side. (I knew this regarding fixed widths, but not percentage widths.) Instead, use width=auto in conjunction with padding.
I know it's a while since this topic was opened but I came across a similar situation and found it was because I had an element with the following properties right: -999999px; position: absolute; hidden off screen.
Changing the above to left: -999999px; position: absolute; solved the same issue the OP had (white screen to the right and ability to swipe right).
I'm using Bootstrap 3.3. I tried all of these solutions, and nothing worked. Then, I changed my <div class="container"> to <div class="container-fluid"> in the section that I was having trouble with. This solved the problem.
I tried all what has been suggested here, nothing works. Then I've relized that it connect with scale of page. So then I added <meta name="viewport" content="width=device-width, initial-scale=1.0"> to header.php in my main theme's folder and it 's fixed problem.
Seems as though results are varying for different circumstances but a sitewide
html, body { width:100%; x-overflow:hidden; }
seems to have worked for me!
Fixed!
Had a similar problem. Fixed it by setting the width to a current device width.
body, html {
max-width: 100vw;
margin: 0 auto;
overflow-x: hidden;
}
SOLVED ¡¡
Since installing protostar joomla template 3.X and start adding content in the module K2 I noticed that annoying scroll with a blank space on the right side, visible especially in iphones.
A correct partial answer was gave for Eva Marie Rasmussen, adding to the body tag in the file template.css these values:
width: auto;
overflow-x: hidden;
But this solution is only partial.
Search div class or label that is causing this problem and once detected add to that class in the file templete.css the same values:
width: auto;
overflow-x: hidden;
In my case add to the class "span" these two lines to finally look like this:
[Class * = "span"] {
float: left;
min-height: 1px;
margin-left: 20px;
width: auto;
overflow-x: hidden;
And it´s working now¡¡
On http://phoenixprints.org/viewpicture.php?pid=258 the main picture stretches vertically and looks bad. I don't know why its happening at all, and seems to only happen sometime. This does not happen on all pictures, and is puzzling me.
I'm running 18.0.1025.151 (Developer Build 130497 Linux) Built on Ubuntu 12.04 on chromium and it does not happen.
19.0.1084.56 m google chrome on windows xp it does?
You set the image height to 100% with this style:
.viewimg img {
width: 100%;
height: 100%;
}
None of the parent elements seemed to have an explicit height given, so WebKit (Mac/Safari in my case) probably chose the window's height as a reference for calculating percentages.
In firefox it only works because it seems to completely ignore the height: 100% part. Try it with some other values, and you will see.
My solution would be simply removing the height: 100% from the css, browsers should (in theory) resize the image by keeping its normal aspect ratio.