I am experiencing a weird issue with my making my website responsive.
I basically have this output of my website on mobile devices:
Even though my body is set to overflow-x: hidden;, there is still white space and I can scroll on the x axis. I do not know why this is happening even though I have set it to hidden.
One thing, however, that might be making this happen is this right here:
When I scroll to the end of the website and then scroll on the x-axis to the farthest right, I see these things. Both the banner and the New icon should appear at the start of my website but somehow I see them at the bottom.
Basically, I am looking for this output:
I even added <meta name="viewport" content="width=device-width, initial-scale=1.0"> but I don't know why my website is not the same width as the device. Any suggestions?
Make sure your html element also has overflow-x: hidden:
html, body{
overflow-x: hidden;
}
Related
Kinda broad question but I've got something wrong in regards to my website's (https://huskybiz.com) viewport. I'm trying to format it to look good at all viewport sizes. The issue is with the mobile formatting. I try adding the standard viewport meta tag
<meta charset="utf-8" name="viewport" content= "width=device-width, initial-scale=1.0, user-scalable=no">
However this results in only a portion of my website being shown on mobile with the rest flowing off the screen, as shown here:
As of now my solution has been to make the initial-scale = 0. I know when the initial-scale=1 there is no initial scale so I honestly don't know what having it equal means but it does make my entire website scale onto the mobile devices. However with this fix when you first load the website my nav bar does strange things where it starts out 1/2 the width of the viewport before quickly clipping to 100% of it, as shown:
Other than that I have my html and body css like this:
html,body {
margin: 0 auto;
padding: 0;
width: auto;
min-width: 800px;
max-width: 2000px;
height: auto;
min-height: 100%;
}
My two concerns are I don't understand why the initial-width doesn't work when equal to one when from I believe it should, and why my fix has my nav doing that clipping. The min-width of the html is 800 really just for desktops when people try to scale the window too narrow but that might be part of the problem otherwise my nav bar is fixed so it can be hidden/shown while scrolling. That seems to play a role too. Otherwise I'm stumped. Thanks for any help.
I have a problem with mobile version of my website http://dsmedvednikov2.zzz.com.ua/. A horizontal scroll appears when using iPhone or iPad, no matter whether using Safari or Google Chrome browser. Everything works fine on Android devices. Could someone give me an advice?
you can restrict user to stop zoom/pinch on your website by adding this meta tag :
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
or if its a very minute x-scroll effect you can use the following little hack:
body {
overflow: hidden;
overflow-y: auto;
}
it will stop any horizontal scroll effect.
It seems like the page css is making this mess. Even in safari on my Mac getting the same issue. Please make sure your CSS.
As of my knowledge I gone through the CSS properties of your page
which is causing the issue. It will be better if you use % instead of 'px' will resolve your issue.
Thanks!
Keep Coding.
If you are using fixed width, then it might lead to problems. Use **
width:100%
**
We have a web app which has a fixed side bar used for navigation. The app is built of this template
We are facing a very strange problem where the scroll bar disappears from the html and the page gets cut off. The interesting thing is the scrollbar shows up for 99% of our users but not for the remaining 1%.
We tried everything we could think of including setting the body and html to 100% height and automatic overflow, we also asked those 1% of our users to disable all their browser extensions, clear their cache but nothing helped.
Those 1% still have scrolling issues and their pages are cut off.
What can cause a scrollbar to disappear for some users but not others?
Without actually seeing the page, the only thing I can think of is making sure the scrollbar always shows with overflow content like so.
html {
overflow-y: scroll;
}
Some additional research shows that sometimes Firefox doesn't play nice, so you can try this if that's the case.
html {
overflow: -moz-scrollbars-vertical;
overflow: scroll;
}
Source: https://egilhansen.com/2007/03/28/css-trick-always-show-scrollbars/
I have an issue with fixed position in my website when tilting an iPhone or an iPad. I have read a lot of threads about fixed positioning in IOS but even if it has been a big subject some time ago, it seems that now Safari for IOS is supporting the CSS "position: fixed" (at least partially according to http://caniuse.com/#search=fixed). Indeed it works most of the time but I have one remaining issue when I tilt my device.
I have in my body:
<header>Title</header>
<main>Content</main>
and :
header {
position: fixed;
left: 0;
top: 0;
z-index: 10;
height: 50px;
padding: 0px 10px;
width: inherit;
}
When I look at my website with the landscape orientation, scroll a bit and then come back to portrait, the fixed positioned element (my header) ended up in the middle of the page keeping its landscape size. I just have to scroll a bit manually or just touch the screen and everything is in place again.
How can I avoid this display error just after tilting? I would rather avoid any aditional libraries such as iScroll now that fixed positioning is supposed to be supported. I have also try to scroll with jquery when the screen is resized but it is not working completely.
$(window).resize(function(event) {
var currentPosition = $(window).scrollTop();
$(window).scrollTop(currentPosition+1);
});
With this solution on an IOS5 device, the fixed header stay correctly on the top but when transitioning from landscape to portrait, it keeps its landscape size (a manual scroll with a touch on the screen makes the header get its correct size).
Thanks for your help.
I have done some experiment and I have solved my issue playing with meta viewport tag. My head tag was containing:
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
I tried:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
Now I do not have the wrong tilt behaviour anymore and the zoom is still disabled. It seems to work on android too and for top and bottom fixed position.
I've been trying for days to get smooth transitions in a RhoMobile project i'm working on, and i've managed to fix most of the glitches in page transitions: flickers, header jumping a couple pixels on transitions, etc...
But one problem still remains: It seems that when going from one page to another, just after the transitions is done (the destination page alredy appears), it will scroll down about 15-20 px, as if during the transition, it paints the destination page content not taking into account the px needed to display the header, and then later, adds that space.
I've seen this question asked before, but with no answer. Notice its not a duplicate of all the questions regarding flickering on transitions, since if alredy managed to get that working.
My viewport is as follows:
<meta name="viewport" content="user-scalable=no, height=device-height, width=device-width">
I've tried using javascript to set overflow: hidden while transitioning, but this has no effect on android.
Any suggestion appreciated,
Thanks!
It turns out that if you use extra height for your fixed headers and you want jquerymobile to respect that size at all times (also in transitions), you have to specify its height in css:
.ui-page-header-fixed{
padding-top: 3.5em !important;
}