I am trying to accomplish something a bit strange. I am working on a mobile-responsive website where in most of the pages all of the content fits inside the viewport so there is no overflow or scrollbars in most scenarios. This looks perfect when viewed on a desktop screen but I really want the tactile feeling of touch scrolling when viewed in portrait on mobile devices, as the page being completely static feels odd on a mobile website. I was thinking of just adding some blank space below the viewport by setting the 'bottom' attribute of my footer to a minus offset value like so:
#footer {
bottom: -20px;
position: absolute;
width: 100%;
height: 40px;
}
This sort of accomplishes what I am looking for and enables scrolling with the extra dead space but after scrolling up and down a couple of times, a blank white space that I assume is the height of the footer appears that is not covered by the pages background styles (which is applied to the page's body tag).
Is there any way of accomplishing what I am looking to achieve cleanly without modifying the rest of the page's content?
Thanks
Related
I've been searching in other questions since this is a pretty common problem but none of them applied to my case.
I'm developing a small web app with React, just to get the basics, and the background img works fine in mobile view (there's a media query that changes it at 480px to a portrait one) it resizes from 480px to 320 and looks good.
The problem is that, at certain heights if you stretch or wide the window the background gets stucked in the middle of it (if you recharge the page it appears as it should, being the window in the same exact place as where the problem occurs).
The img is loaded through CSS in the html, If I remove the background-size property it works as expected in desktop and mobile, but when I cross the 1260px width it doesnt cover the full width.
I have this codesandbox with all my code: https://codesandbox.io/s/stoic-brahmagupta-ro2kb?file=/src/style.css
And I attach an image of the problem. Thanks in advance.
As u r testing this you can see the content of the App is overflowing the html element
I rather use min-height on global elements like body or html than static height to prevent such as cases.
So to fix it you just simply add
html {
height: auto;
min-height: 100vh;
To prevent not overflowing instead of scaling we just add min-height equaly of 100vh (viewport height).
I think it will propably do the job without height: auto; but i like add it to prevent even more edge casing
I'm doing the first project for The Odin Project, which is recreating the Google home page. I think mine looks pretty good considering I've only been at this for a few weeks, but when I take my page out of fullscreen mode, a scrollbar appears. If you look at the Google homepage, The page itself resizes instead of using a scrollbar. Overflow:hidden obviously will just cut off the bottom of the page, so I don't want that. I'm sorry if I'm not being specific enough, but here's a link to my Github to check it out.
And if you see anything that I'm doing completely wrong or messy, I'd really love some criticism.
I haven't had a look at your GitHub, but I would suggest incorporating bootstrap, which basically lets you develop pages responsive to the screen size.
You might find this tutorial helpful:
https://www.w3schools.com/bootstrap/
After a quick look through your Github, you are setting a min-width: 500px to your all class which contans all your content. Try setting your all class width: 100% instead. This will allow your content to fill the page and adjust as the screen size adjusts.
Granted, once you get really small and content hits each-other they will break to other lines, but you would have to handle that with a media-query to adjust the size/scaling etc...
.all {
margin-left: auto;
margin-right: auto;
width: 100%;
}
Actually, all I had to do was remove all your .all styles to fix this issue. I also fixed your footer so it sticks to the bottom of the page. Finally, if you want to make the input size well, use media queries like so:
#media (max-width: 500px /* or whatever */) {
input {
width: 80%;
}
}
This will set the input's width to 80% at screen sizes 500px and smaller. Hre's a pen of what I changed: https://codepen.io/Hudson_Taylor11/pen/pemaoK?editors=0100
I would like to have a background image on a website. This seems like a pretty reasonable request.
I want the background image to be in a fixed position, so that the content scrolls over the top of it. On a classic desktop browser, you can use something like background-attachment: fixed, but this has no affect on my small touch screens. Instead the image scrolls along with you.
It would be great if I could have a position: fixed div with the background image - could accomplish this... but then there is another issue where the 'chrome' or the UI for these touch/small-screen browsers / changes the size of the view-port to accommodate it's buttons - and then again when you scroll down + the buttons go away and the viewport is now taller. (this is not a new problem, but it seems like a problem everyone is OK with.) I am wondering if I'm missing some other option / . I've been trying to find a way around this for years.
<div class='background'></div>
.background
background-image: url('some-image.jpg')
position: fixed
top: 0
right: 0
bottom: 0
left: 0
http://codepen.io/sheriffderek/pen/pbQpwp
Debug view for phone: http://s.codepen.io/sheriffderek/debug/pbQpwp
In my web app I have a sticky footer for small screens. The issue is that the sticky footer jumps up and down depending upon the state of the keyboard.
I am looking for it to be overlay by the mobile keyboard. Here is the css for the sticky footer
width: 100%;
position: fixed;
bottom: 0;
height: 85px;
left: 0;
right: 0;
Any workarounds for this?
It's best to use something other than fixed for smaller/touch screens, since you would have to account for a number of different problems. This keyboard issue is one, turning the device to viewport: landscape is another. It can also cause an issue with scrolling, since touch devices don't render certain things until the scroll has completed (meaning elements can react differently depending on how quickly the user swipes their finger to scroll). It's better to make a site that is reliable most of the time instead of having to figure out and account for all the different possible circumstances.
Even for "desktop" devices, if you can do something without fixed positioning, do it. In those cases, using fixed positioning is more of a shortcut than a best practice.
There are a number of ways to create a "sticky" footer without using fixed positioning, and this will help to keep your site optimized for the best viewing experience on most devices. If you google 'sticky footer', you'll find a number of great options. Some are below.
Ryan Fait's CSS Sticky Footer
CSS-Tricks sticky footer
Bootstrap sticky footer example
Since a couple of weeks i'm building a new website. This website starts to look pretty good but there is one problem.
When i view my website in a browser window that is smaller than the actual webpage, the menubar on top of the page gets cut off. I can't scroll up and down the page, but the top part can't be reeched.
This problem probably has something to do with the 'center' code I use for center vertically. Is there an solution where i can keep my webpaged centered but still can reached the hole page once I'm using a small window?
I all ready solved the problem in Chrome mobile by using a 'viewport' metatag.
Sadly the desktop browsers like IE, safari, Chrome etc. still refuse to show the topbar of my webpage when the window is small.
Here is a link to my website:
test.themissingsticks.com
Try viewing it in a fullscrene window (with a resolution above 800px height) and view it with a window of less than 600px height. You will notice the gray menubar on the top of my website will not show, net even when you try to scroll upwards.
The website is centered by the following line of css:
top: 50%;
margin-top: -340px;
left: 50%;
margin-left: -513px;
width of the page is 1026px and height is 680px.
Please help. Thanks in advance!
go to style.csss
change css of "menutms"
replace margin-top: -340px; by margin-top: -300px;
it will work in all browser.
Found the answer! I made 2 div's for vertical and horizontal center alignment. These two are positioned absolutely. the rest of the hole webpage is positioned relatively inside these div's.
The only downside is that IE9 is not displaying the site very well.
Here's a disciption of the method:
http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/