I'm out of solution. My page wouldn't scroll on mobile devices (testing with iPhone 6).
Here is the structure
<html>
<body>
<header></header>
<div id ="content"></div>
</body>
</html>
The div "content" is about, 10000px height (lot of content)
Other pages, that does not include content, are scrolling perfectly.
So I think there is something with the overflow of the div content.
I tried overflow auto, scroll, height 100% height 100vh a lot of combinaison for html body and content but I can't get a proper solution that works both on computer and iPhone. Sometimes it's scrolling on iPhone but I have two scrollbars and my computer, sometime it is scrolling but the the header (which is supposed to fade away with headroom) stays here etc.
Any help is welcome. Thank you
http://liveweave.com/4gBZxB
Problem solved. It was not the CSS nor HTML but the JS.
I used touchSwipe and it deactivates the page scroll by default on the div you applied a swipe event on.
If you are using jquery.touchSwipe.js for swipe, do add allowPageScroll: "vertical" to the swipe.
$("#ID").swipe({
-----------
-----------
threshold:100,
allowPageScroll: "vertical"
});
it's working.
Related
Trying to get my icon footer with social links to move above the Safari UI footer without adding padding or margin that breaks the style of the fixed bar on chrome or other browsers. Not sure why it's happening or if there's even an answer. This issue is when you click my hamburger menu and reveal my personal info it gets cropped at the bottom a bit and doesn't allow for the full size of the footer.
Hope you guys can help.
https://www.alexcoven.com
Bug is only in Mobile Safari.
Mobile Chrome:
I found that I was using vh as my variable for height and it was not getting read well on mobile devices. I than changed the height of my containers to be
height: calc (100% - 60px);
60px being the height of my footer. This worked famously!
Ok, i will try my best to explain what i am trying to achieve since i am not allowed to add images here on stack, so here it is:
I have a design for tablets. The whole content takes up the 100% height of the design with just 15px of padding on top and bottom.
So, i have to make the design fit to all the apps available in the market, without having vertical scroll.
I have tried many solutions like using bootstrap with
HTML
<html>
<body>
<div class="main-content">
</div>
</body>
</html>
CSS
html, body, main-content {
height:100%;
overflow:hidden;
}
also, i have tried reducing the size of elements in the page using media queries just to fit the screen vertically for different tablets.
The problem is, there are like 80 pages in the design and i believe this is not the best solution for this amount of pages and to add media queries for every single page. ( the page designs are different from each other, so common classes cannot be used )
Would like to know is there any other solution to fit the height of the page for tablets with no scroll.
Any help, suggestion will be appreciated.
Try this,
html, body, main-content {
height:100vh;
overflow:hidden;
}
I have an issue that I have seen come up in a couple different sites and I have never been able to find a solution. I have noticed that many other people have had similar issues but every fix that I have seen is not working on the site I am currently working on. Basically what I am trying to do is have a responsive layout with a header that has a repeating background that spans the entire window and a body that has a fixed width. The basic html looks like this:
<html>
<body>
<div id="header">Header content</div>
<div id="main-content">Main content here</div>
</body>
</html>
and the css is something like this:
html, body{
width:100%;
}
#header{
width:100%;
}
#main-content{
width:1000px;
}
This code is not meant to be representative of what is actually on the site that I am working on but to give you an idea of what we are trying to do. To see the actual html, css, etc. please go to http://236887.site-show.com/ and take a look at it. The site initially will look fine but if you shrink the size of the window down so that there is a horizontal scroll bar and then scroll to the right and look at the header, you will see that the repeating background is not going to the full width.
One thing that I did find is that removing the width:1000px on the main-content did fix this issue. However, we need that main-content area to be set to that width. I have also tried setting overflows to hidden and setting floats on the header but nothing seems to correct the issue.
This is especially an issue with Android/iOS systems which run on tablets, smartphones, etc. Any help that you can give me on this issue would be much appreciated.
The issue is that your main-content div is set at 1000px (with 30px horizontal padding) while your CSS file specifies your header to be 960px. Increasing the width of your header to match your content will correct the problem.
Here's the code for the fix:
.grid-50-50 {
display: table;
width: 1030px;
}
If you are doing it in HTML5 I recommend using 100% <header> tag then adding a 100% div 'wrapper'....with this you can have more flexibility.
But for this...If you dont' want to edit the header then set your min to 1030px in your body tag:
body {min-width: 1030px;}
:)
I was testing a website: This Website
When I stumbled upon the following problem. everything looks correct in all browsers I tesded on my computer (IE, Chrome, Safari, Firefox etc...) but When I test this website on iPad, in safari browser I get strange margin at the right side, I can't show a screenshot, but in a nutshell image all website page like you see it on computer, but shifted to the left side (so there is blank space on the right side). Can anyone suggest what is causing this?
EDIT:
I noticed that this margin is somehow affected by margin of arrows that you can see on the sides (used to list through slides). Styles of the buttons have following id's
#prevslide and #nextslide
EDIT2:
As code is very long, I will post links to stylesheets used in website here.
Slideshow stylesheets, #prevslide, #nextslide style rules can be found in second stylesheet
Style1
Style2
And main stylesheet I use to style how website looks, however I dont think that the problem lies within it.
Main Style
It looks like your problem is because of the combination of % and pixels in your css.
For example, your .header wrapper is set to 100%, but the .in-header inside it is set to 1020px. This is fine as long as your browser window is wider than 1020px, but when it shrinks, .header is sizing itself in relation to the browser window, and .in-header isn't.
Set the min-width property on your body element so it won't ever reduce below the size of your main page elements:
body {
min-width: 1020px;
}
You'll need to set a meta tag in the header for the ipad (and mobile):
<meta name="viewport" content="width=device-width" />
This instructs the browser to set the page body to match the tablet size. I'm not 100% sure this is the exact setting you want, but I don't have my iPad handy to test; whatever the solution, it lies in this tag.
I have a page I am designing that is purely html with a css stylesheet.
I have it set up with scrollable content with a header and footer somewhat like this example here: http://www.cssplay.co.uk/layouts/basics2.html
except my header and footer consist of multiple images as opposed to text.
The issue I am having is that when I scroll down the page a little and resize the window to a smaller size, my header and footer disappear... but only in Firefox.
When I maximize the window again, the footer appears but some 300-400-odd pixels too high and the header is still gone.
Safari, Opera and Chrome all work fine; I can resize the browser window however much I want and my page reacts appropriately.
What could be causing this?
The weird thing is that if I don't scroll at all, and then proceed to resize the window, Firefox retains my page's styling...
possibly an overflow:scroll issue?
thanks everyone
sorry, i forgot to include my link:
http://www.theskycaptain.com/THESKYCAPTAIN.COM/projects/cosmicwomb.html
(I realize that the bandcamp player isn't behaving properly and my codes a bit messy, but I'm in the midst of developing, I've just hosted it to sort out this issue: simply scroll down a bit, resize the window and then maximize and you will see what I mean)
Your webpage has an improperly defined img and br tags everywhere including other errors that need to be cleaned up.
Incorrect Example:
<img src="../image/topspace.png"></img>
Correct Example:
<img src="../image/topspace.png" alt="image" />
For more info on img tags, read here.
Also, change:
</br>
To:
<br />
Try giving top and bottom values to your absolutely positioned elements.
i.e.
.topspace, .headercon, .scroller { top: 0px; }
.footer { bottom: 0px; }
( These are not necessarily the exact values you'd want, but simply an example )