I'm trying to make my wordpress site always display with 100% width. My wordpress-css has no mobile specific css. When I visit the site on mobile, the site is not longer 100% width, despite the css saying that it should be. I'm currently testing stuff in the css and therefore not linking the site.
EDIT: I now tried removing all width-specifications in the entire css, the word "width" is not present anywhere in the css. The html still locks to exactly 320 pixels, same as the width specified by the iPhone4. This could be an issue with wordpress and not the css file.
The really weird thing is that if I scale up the window, and then scale it back down, it looks like it should look:
This is the css:
body, html {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
color: #333;
min-width: 100%;
margin: auto;
}
I have the viewport-thing at the top of my html:
<meta name="viewport" content="width=device-width">
However I have not been able to add the "initial-scale=1" into the wordpress html. From what I read I doubt that this is the problem though.
Any suggestions what could be wrong? As a sidenote: It does fail to display 100% width on an actual mobile device as well, it's not just the chrome device simulator failing.
A hint could be that it seems that even wordpress itself misjudges the width of the screen, as can be seen by the wordpress header not filling up 100%
By request of rsn, I will sum up our discussion as an answer. Creds to rsn and everyone else for finding the issue!
In this case, the width itself is set properly. The problem is that things move outside the 100% width and the site tries to scale everything down to fit the stuff moving outside of 100% width. This caused everything else to scale down, including the font size of the text which I thought was an entirely different problem. So, after specifying:
.img {
max-width: 100%;
}
The site worked fine. Except for one last detail, I also has a really long link that, despite having word-wrap: break-word, ended up being wider than the width. To solve this I added:
.long-link {
word-break: break-all;
}
And now nothing moves outside the 100% width, and everything works as it should.
Related
Third time round redoing this because im not really fully able to understand my problem this time round im going to be a bit more detailed.
My problem starts here:
Problem
as I think it shows, you can see the width of the picture is 1920:720p, This is too large on the viewport and I need to scroll left and right to be able to see the rest of the image on the page.
I have tried pretty much everything I've seen in the comments so far, perhaps I tried incorrectly but nothing seemed to fix it, keep in mind my display is 19:10 and is the display used with the m1 macbook. Im not sure the exact resolution or if it matters but I can't for the life of me seem to make this image fit my page, I've tried using:
.(the picture) { width: 100% height: 100% }
And:
.(the picture) { width: 100vw; hight: 100vh; }
And:
.(the picture) { width: 100vmin; height: 100vmax width: 100vmax; height: 100vmin }
And pretty much every combination of those things you could think of and it stays the same resolution and does not ever fit the view port.
Another problem i'm facing is that when I make the window smaller it cuts all the elements that don't fit inside the smaller window.
Thats all I got for now, ill probably add more if I need to later.
Edit1: Keep in mind I did not use vhvw % and vminvmax with only the picture, I tried them with the body element and some other things too.
This is called "Responsiveness".
The tag
Start by adding this meta tag to your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
vw and vh
as mentioned by #cloned,
use widht:100% and height:100% to set the size relative to the parent.
and use width:100vw and height:100vh.
vw is view-port, the size relative to the screen. 100vw means 100% of the size of the screen. So if the screen is 1920p in width, the element itself will appear 1920p. If you set it to 10vw, the element itself has a width of 192 pixels.
On a window with 30px width, 10vw is 3px.
Same is for vh but it's for the height.
These guys, vh and vw work completely individually and may create problems on windows with an aspect ratio other than 16:9.
For this we might wanna use v-min or v-max
You can read more on this here:
https://www.w3schools.com/cssref/css_units.asp
https://www.google.com/search?q=how+to+make+responsive+website+using+css
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
Extra information
I also use position:fixed when assigned tasks to make the website responsive like this:
.class {
position:fixed;
left:0px;
right:0px;
width:100vw;
height:100vh
}
this makes the entire element cover the page and have it completely centred. You can try zooming out, scrolling (although the scrollbar doesn't appear unless there's more) or resizing it to a completely different dimension. It will look as if it's covering the entire page perfectly.
I'm working on my website, and have the main body div set to a certain width. But when I upload all my files to the web host the size of width shrinks, and no matter how I adjust the code for the div the width size stays the same(wrong size) on my published site, despite looking right when I just open the code in a browser.
I've tried Editing the code directly in the web host to see if I can even adjust the width at all. I've already tried deleting and re-uploading everything a few times.
Here's what I have on my CSS style sheet:
.body1{
max-width: 1200px;
height: 1000px;
background-color: #fffdf8;
margin: auto;
padding: 10px;
text-align: center;
border: 2px solid #f892c9;
}
<div class="body1" style="height: auto">
The width of 1200px is how big I want it to be, and it appears correctly when I open the html file in a browser. When I upload the code with a webhost the width is smaller, and even if I change it to a bigger number like 1500px it stays the small size.
EDIT: I'm publishing it with 000webhost.com. As far as I can tell there's no other CSS, only what I've uploaded for my page.
Maybe you want the atributte "width" instead of "max-width"?
max-width its usefull when you want to resize the page with a specific width.
Check the Reference CSS anyway: https://www.w3schools.com/cssref/pr_dim_width.asp
I still don't know why exactly it wouldn't work in the first place, but I finnaly decided to just cut it out of the CSS style sheet and put it with the rest of my html the old fashioned way:
Now it works.
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've looked at many "mysterious white-space at bottom of page" issues here on SO, and played with the viewporttag many times, but I still cannot figure out what I'm doing wrong!
The page in question is: http://www.seniorchoicesunl.com/error_documents/error401.php
Here's what it looks like on mobile from Chrome Dev Tools:
Any Ideas on what I'm doing wrong?
Edit:
setting ANY initial-scale is bad news! It makes the font too tiny!
Take a look:
The desired mobile look, while keeping the desktop and tablets as-is, is this:
P.S. Fixing this issue could reciprocally fix other related issues I'm having with other webpages.
Add this on top of your css file :)
html,body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
it fixed the bug for me.
What's going on here:
You've set width=device-width, this makes the layout size on your page equal to the device's screen width. i.e. making an element 100% will give it the same width as the screen.
Chrome infers the layout height using the width and screen's aspect ratio. i.e. height=width/aspectRatio
The sub_container_div element actually ends up being much wider than the layout width of the page. In my case on a Nexus 6, the device-width is 412px while the sub_container_div is 594px wide.
Since the content is wider than device-width, Chrome allows zooming out and loads the page at the minimum zoom level but this doesn't change the layout width/height so height 100% only fills device-width/aspect ratio pixels, which doesn't fill the zoomed out viewport.
The correct way to fix this is to make sure all your content is contained by the layout size. In your case, the reason the sub_container_div is wider than the layout size is that your padding/margins cause it to expand outside the parent. The solution is to add box-sizing: border-box to the sub_container_div and dialog elements and width: 100% to sub_container_div. That way, Chrome can't zoom out and you can't see outside the layout box (in HTML spec language, that's the initial containing block).
I had the same issue on Chrome 77
I fixed the problem by removing height: 100vh on the body tag.
This seems to fix the problem:
Change <meta name="viewport" content="width=device-width"> to <meta name="viewport" content="width=device-width,initial-scale=1.0">.
Override width: 25em; on .sub_container_div in your mobile CSS so that the container scales with the width of the view.
If you do not want the font to scale, it seems just adding initial-scale=0 will work as well. However, this will make the text very hard to read. You can play around with different scales, but it seems just setting it will fix your issue.
In my case one element was too long for a mobile screen and it broke the webflow. After I shortened the width of the long element, the extra white screen was also removed from the footer.
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¡¡