+ 8
CSS position: fixed
Hi all, I did a new code, using the CSS properties, just to practice. But I just notice that the CSS "position: fixed" doesn't work from my mobile. Anyone can help me with this, please? https://code.sololearn.com/W92saoYDP3Tb/?ref=app THANKS!
23 Answers
+ 12
I'm not certain what you are trying to accomplish Alessandra C but have you tried position: absolute; ?
+ 12
It looks great to me Sleepy Koala nice job. She can remove the background color if she wants.
+ 9
Is this how you want it? If not please explain further.
https://code.sololearn.com/WfSzyU71igmy/?ref=app
+ 9
I see what you are doing now it seems to partially work from the bottom up? Hopefully Calviղ can help when he shows up later.
+ 8
Alessandra C Does this helped? I'm not sure about the problem.
You can just read the comments I made on the CSS. you will see the changes and corrections.
PS: I added the words in the paragraph so it will be longer.
https://code.sololearn.com/WH77XYvnLW1a/?ref=app
+ 8
thanks Calviղ I update the code with the proper html doc...
and thanks Sleepy Koala I changed the CSS as you suggest... and from my side, it works from mobile as well!!!
https://code.sololearn.com/W92saoYDP3Tb/?ref=app
+ 7
thanks Janning⭐ ill be waiting for your answer
😁
+ 7
Morpheus For me, I don't think if position: fixed; would really works (in real web development) even if the width is wider than the device screen or in a horizontal scroll because if you're going to make a responsive website, it should have no horizontal scroll on the body of your webpage that's why position: fixed; only works on vertical scroll. (Correct me if I'm wrong).
+ 5
bobbie following the example in the "positioning" chapter, i modified the code in a way that scrolling the page you can see thorough the words "paragraph" the phrase "with SOLOLEARN is fun to learn", to see it clearly u need to sroll the page fast.. try from your laptop in case, as it works from my laptop..
this is the base code:
https://code.sololearn.com/W812YH9A8RW4/?ref=app
+ 5
Morpheus well, it means that is not just me 😅
+ 5
Alessandra C So you want to stick that "with SoloLearn is fun to learn" phrase in the middle of the page even if you scroll it?
+ 5
bobbie Thanks. I hope this fixed her problem. 😅
+ 5
Alessandra C
You should use proper html document format.
display: fixed should works if you add your elements into
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
// add elements here
</body>
</html>
+ 5
Alessandra C Happy to help! Keep coding! 😊
+ 5
Nilesh Hazra I bought this app.. I pay monthly...
+ 4
Hi bobbie thanks for your reply.
I did this code from my pc, and it's work properly, but it doesn't work from mobile..
+ 3
Hmm. Good question Alessandra/Morpheus. I've noticed this particular phenomenon too in other Code Playground projects, but haven't thought much about it. If Calvin doesn't have an answer handy, I'll do some testing later after work.
:)
+ 3
I am still in dark though how to make anything fixed, when we have html elements whose content is wider than screen width.
Just Making the width to fit screen is a quick fix.
main doubt is
Is it possible to have position fixed with elements having wider than screen width?
If yes then how?
Calviղ having the html body structure doesnt solves problem here, and we can write html codes even by omitting head, body, html tags.
Sleepy Koala thx for the input, no need of any other css but just
. parag{width : 98%} would do the trick (i. e width less than screen width)
so for me the accepted solution would be that fixed should work even if
. parag{width : 200%}
which doesnt, so I am still confused.
+ 3
Wow, you guys work fast! Great job, team! ❤️🎉👏👍 Sorry I missed most of the fun. 😔
There aren't very many use cases that I can think of for fixed position of items wider than the viewport (perhaps the game developers would disagree with me here), but one thing that requires quite a bit of work is building responsive tables. I would consider the data being shown to see if position: fixed; or position: sticky; would be more appropriate for row and column headers. Since we seem to be delving into intermediate / advanced stuff in this thread, here's a couple of links that might be of interest:
https://css-tricks.com/idea-simple-responsive-spreadsheet/
https://css-tricks.com/responsive-data-table-roundup/
I haven't mastered these methods for responsive tables myself since it doesn't come up very often, but it's the kind of code I like to come back to for exercise... something to chew on per se.
Often have questions like this?
Learn more efficiently, for free:
Hot today
Pig Latin
0 Votes
Someone can help me
0 Votes
Please rate my code from 1 to 10
2 Votes
Square Roots
0 Votes
What's wrong with this?
2 Votes
I’m new someone can help me
0 Votes