Position: fixed advice please

Probably could have put this question in with my “some feedback” post.

I believe that position:fixed doesn’t work well on mobiles. If this is still true, then:

1.Is it possible to detect the device then using php, css, js or something alter the structure.
2. Am I better off designing pages strictly for mobile, or is it not even possible to load certain scripts based on device.

It’s not a good idea to try to detect the device and plan your css accordingly because new devices are constantly appearing. You will never be able to keep up with the changing technology.

You’re better off reading up on CSS media queries and responsive web design and basing your styles on viewport width.

2 Likes

I’ve been reading up on media queries and trying to build a site that works for all media types. I like the “position:fixed” for my header, but I was reading that some devices don’t like it/ don’t work well with it. If that is still the case then I would rather not use position:fixed.

Thanks for your reply

Modern devices support fixed positioning ok these days but the problem is that on small devices a fixed element leaves little room for content so is best restricted to a very small header or footer.

Indeed on desktop devices you will have issues where content is obscured by the fixed element if the content in the fixed element wraps to a new line or if the user resizes the text. There are also problems if you have in page links and the page will jump to the destination which may end up being obscured by the fixed element.

For these reasons fixed elements need considerable care and planning to avoid all those issues.

I prefer to use sticky headers which only become fixed after the user has scrolled but of course requires scripting where position:sticky is not supported.

So yes position fixed is well supported but whether it’s a good idea or not depends on how well you implement it.

1 Like

Thanks Paul, that’s the answer I was looking for. I have been reading so much I’m getting confused, I thought fixed and sticky were a reference to the same thing.

I learn and remember better by doing, but trying to remember what you were reading where, and going back to it for reference. Half the time I cant find it, and its not just learning html anymore. Just for my simple site its html, ccs, j.s, php, mysql. Now I’ve started back at all this I’m not going to stop again.

Hi there slimpickings,

do not use “position: fixed” at all for page headers, it
is a perfect example of the arty-farty nonsense that
currently pervades web sites. :rolleyes:

It is a complete waste of content space, and shows
a total contempt for the visitor’s intelligence. :eek:

The sensible method to use is the anchor…

<a href="#top">Return to the top of the page</a>

…positioned appropriately. :winky:

coothead

Thank you Coothead, I will take you advice. I wasn’t that comfortable with it anyway. I want a user friendly site, and prefer not to create problems for myself.

This learning is driving me mad, I just can’t retain everything.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.