To start off I am not an expert at this, as a matter of fact I'm following along in a online course. My test website comes out fine on desktop but on mobile it's misaligned and squished. I have already used this:
meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"
and other variants of this but nothing seems to work. Here is a link to the github page:
https://wunray.github.io/cv/
Can anyone explain to a novice what exactly is going on to cause this?
As far as I can tell, there's nothing wrong with your meta tags. It's just a css problem.
With these changes, your site perfectly fits on mobile:
You have some elements with negative right positioning. Either make them right: 0 on mobile, or add overflow-x: hidden to a parent element (ie. body).
Add img { max-width: 100% } to your css so images don't exceed window size.
The page design is breaking because of your css. Meta tag is fine.
In h1 tag you can use ->
word-break: break-word;
Also adjusting width of img will make the page responsive.
I am building a simple web page, and it seems to keep spilling over the width of the phone no matter what I try. I have tried to add the css attributes max-width:100% and overflow:hidden to every single container in the page, and still the problem remains.
I just feel like I am overlooking some very elementary solution. Could you please help?
Edit: A link to the page is https://www.hyperoffice.com/contact-us/contact-us.php
Please add the following to the main css file of your website.
body{
height: device-height;
width: device-width;
}
Cheers !
juniorgoldreport.com is the website I'm working with. On regular desktop view its fine, when I shrink the window down smaller and smaller it seems to act responsive and it's progress. It is being made in wordpress.
When I view it on my smartphone, (LG G4), there is a huge white space to the right of the website and I cannot figure out why. I've been using inspect element via chrome to trouble shoot, but being on a cell phone I dont have that option so easily.
Does anyone have an idea?
Here's an image of the issue when you search the website on a mobile device:
Along with that too, if you guys easily know in my header my logo and my social media/subscribe button are really difficult to align center so its even on both side and they're aligned vertically.Any hints or ideas on this one? I'm much more concerned with the mobile issue though.
Looks to me like it's
.page { overflow: visible !important; }
in line 3308 that's causing the issue. Not sure what purpose that's serving, so you can take it out, but it might cause other issues.
Remove left: 50px; from .site-main .sidebar-container and the gap should disappear.
I have taken over a website for a company and when it was handed to me, there was quite a bit of work to get it where it is now. Some of the stuff in the site, the owners want to keep, some they allow me to change. One thing I am trying to figure out right now is how to get the mobile version to line up with the desktop version. It seems like in portrait mode, the container width is too small; there is space to the right and some images overlap. I have tried the recommendations in other threads that seemed to be asking the same question, but nothing worked so I thought I would post my own question in case I am changing the wrong code.
I added:
<meta name="viewport" content="width=device-width, initial-scale=1">
and looked for pretty much any "width" in the css, but to no avail. What else am I missing?
Here is the site:
http://leisurelandrvcenter.com/
specifically the "Inventory" page:
http://leisurelandrvcenter.com/inventory/
-Disclaimer-
This seems to only happen on certain devices and only in portrait mode. Landscape mode works fine on the devices checked (android only).
Thanks in advance!
if you want to make it responsive you have to get rid of all the fixed width there are on the css, for example:
if you want to make the inventory page responsive you'll have to edit the following css:
#layout-content {
width: 1285px;
}
to this:
#layout-content {
max-width: 1285px;
width: auto;
}
Then in order to resize the images (for example the logo) you'll have to set the following css:
img { max-width:100%; width:auto; }
Instead of using the img tag you should use the css class or ID of the logo or any image you want to make responsive.
The images are too large for small screens. You could add mediaqueries to your css that set the width of images to 100% for smaller screens. (And anyway use css to set img sizes, instead of using img attributes in the html)
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¡¡