I'm working on my portfolio website at the moment. I'm trying to optimize it for as much hardware as I can, so I've looked at my site on a tablet. Bummer. I have a footer that needs to 'stick' to the bottom of the window, which I successfully created with the following css:
footer {
position: fixed;
bottom: 0px;
height: 100px;
width: 100%
}
However, on a tablet it is not sticking to the window bottom, but hovering under the rest of the content (that's where I put it in my HTML). That means if a page doesn't have much content on it, the footer is placed on the middle of the page. I've googled around for a while, and found that some tablets don't support fixed positioning.
Does anybody know of a workaround to this problem?
All right, I'll answer my own question to sum things up.
Thanks to Darek Rossman, I've found some interesting links. The main point is that position fixed is gradually gaining more support on tablets, so it's a matter of time before this problem isn't a problem anymore. The workaround that seems to work for me is using the javascript solution Darek Rossman mentioned in his first comment. However javascript is still not working flawless on some tablets. Until better times arrive, I'll use a different stylesheet for tablets (using media queries). Special thanks to Darek Rossman who posted the interesting stuff!
The fine people at the Filament group created a plugin for this, check it out here:
Fixed-Fixed
They've also created many more great plugins for "progressive enhancement", check it out here:
SouthStreet
Keep up with them at they're website here:
Filamentgroup
Related
Chrome and Safari tend to autohide scrollbars and on macOS, it is pretty aggressive. There's a page on our website that has multiple sections and one of them has a scrollbar which needs to be visible at all times. Currently, it is only visible when the user actually scrolls or is actively on the specific div.
I am looking for a way to force the browser to show the vertical scrollbar at all times.
*There are a lot of solutions to this here and elsewhere but most of them don't work as they are outdated. I couldn't find any solutions that work consistently so, in case there's an answer that works somewhere on this site, feel free to mark this as duplicate.
If I understood it right, try this:
html {
overflow-y: scroll;
}
Source
Website in question: s123c.github.io
Recently I started making a one page scrolling website as a side project and used a 'selector' portfolio. I also added a auto-scroll masthead.
I came across the issue of the next title (Side Projects) after the portfolio gallery sticking to the right side. I can't understand what triggered this happening as I can remember it working swell before.
Also #media queries have stopped working which is definitely related as the inline title "Side Projects" moves down as the window gets smaller. I feel as if the #media queries no longer work and the browser is automatically using default scaling.
Any advice appreciated (but please don't advise me to get Framework or Bootstrap. I'm aware of the options).
Not sure how the website is suppose to look but adding display: inline-block; to the id #portfoliolist is pushing that div down below all your thumbnails.
#portfoliolist {
display: inline-block;
}
I apologize ahead of time, I am not a skilled web designer at all, and I did do some googling before asking this, but it was complicated as most solutions require creating new divs and stuff, I was hoping there is a simple mod or line I could just add to the existing code for the footer to solve this?
Here is the site: http://ratecitident.com/ See how the black footer is overlapping the ratings box, how can I prevent this, to keep the footer at the base on any size screen? it may not show the problem on your screen, but it does on certain sizes, and on phones.
This is how it looks like on my desktop screen: http://gyazo.com/112b627bb056fc0bc6eb48070939d9b7
Thanks
You can simply add this little bit of code to your CSS:
div#content {
margin-bottom: 20px;
}
This is gonna give you more spacing,because you are forcing the footer to bottom of the content div to 20px.
You can always,target a specific screen using media queries,in this case you must target the iPhone screen,here is some good tutorials about the media queries.
css-tricks.com's tutorial
mozilla developer network's tutorial
I've more or less finished a simple bootstrap site for a client, however I ran into an issue where the body element seems to have an extra 160px on the right side! I've spent like 3 hours already trying to find an answer.
To partially solve this problem I added the below css to the head:
html, body { overflow-x: hidden;}
This got rid of the extra 160px however on mobile devices (only tested iOS) the scrolling action is now incredibly sticky - rather than the fluid scroll we expect on a mobile device. Instead of one fast flick of the finger making the page continue scrolling, now when the finger leaves the screen the page stops dead.
In terms of user experience this isn't really acceptable and has been a real pain to try and solve.
I've put the site here for you to try on a mobile to feel the 'stickyness' goo.gl/yEI3rn
On desktop you can use inspector to disable the overflow-x:hidden; on the body to see the extra pixels on the right.
If anyone can investigate the site and tell me any one of the following it would be very useful:
Which element in the body is causing the body to have the extra width?
Why the body element has the excess width?
Is there an alternative to overflow-x that will not create mobile scrolling issues?
Any other areas to investigate to try and solve this issue?
Thanks so much for any insight here!
you can try adding this to your css to see which element goes all the way:
* {
outline: 1px solid right;
}
I'm programming my website and I wanted to create different css for different resolutions.
I've done this by following the tutorial up there: http://css-tricks.com/resolution-specific-stylesheets/
Everything done correctly, but when my window resizes for the narrow css, all images are big.
1 Question: How can I resize them in the css?
2 Question: If I don't want to show some div in the narrow style, using "display: none;" will block it from loading or it just hide it?
Thanks a lot and sorry for my bad english.
This might be a good article to read through. It's one of the better articles I've read about "responsive web design." http://www.alistapart.com/articles/responsive-web-design
This might also help with fluid images in case you wanted to dynamically resize images through the use of the following:
img {
width: 100%;
}
Not super IE friendly from the sounds of it, but workarounds are explained in the article.
http://unstoppablerobotninja.com/entry/fluid-images
This is the final result of the first "A List Apart" article... pretty well done IMO. Try resizing your browser to see how it adjusts. http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
Use this for resizing images
#my_image {
width: 50px;
height: 100px;
}
To answer your second question, display: none just hides it. The image will be downloaded