+ 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!

css mobile fixed position

12th Sep 2018, 6:10 PM

Alessandra C

23 Answers

+ 12

I'm not certain what you are trying to accomplish Alessandra C but have you tried position: absolute; ?

12th Sep 2018, 6:15 PM

bobbie

+ 12

It looks great to me Sleepy Koala nice job. She can remove the background color if she wants.

13th Sep 2018, 12:52 AM

bobbie

+ 9

Is this how you want it? If not please explain further. https://code.sololearn.com/WfSzyU71igmy/?ref=app

12th Sep 2018, 7:20 PM

bobbie

+ 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.

12th Sep 2018, 8:21 PM

bobbie

+ 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

13th Sep 2018, 12:16 AM

Email Not Activated

+ 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

13th Sep 2018, 8:39 AM

Alessandra C

+ 7

thanks Janning⭐ ill be waiting for your answer 😁

12th Sep 2018, 8:38 PM

Alessandra C

+ 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).

13th Sep 2018, 9:10 AM

Email Not Activated

+ 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

12th Sep 2018, 8:12 PM

Alessandra C

+ 5

Morpheus well, it means that is not just me 😅

12th Sep 2018, 8:13 PM

Alessandra C

+ 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?

13th Sep 2018, 12:09 AM

Email Not Activated

+ 5

Morpheus bobbie Am I right with her concern? You can check it on my first comment with a code. Did I fixed the problem?

13th Sep 2018, 12:39 AM

Email Not Activated

+ 5

bobbie Thanks. I hope this fixed her problem. 😅

13th Sep 2018, 12:56 AM

Email Not Activated

+ 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>

13th Sep 2018, 2:57 AM

Calviղ

+ 5

Alessandra C Happy to help! Keep coding! 😊

13th Sep 2018, 9:14 AM

Email Not Activated

+ 5

Nilesh Hazra I bought this app.. I pay monthly...

17th Sep 2018, 8:20 PM

Alessandra C

+ 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..

12th Sep 2018, 7:06 PM

Alessandra C

+ 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. :)

12th Sep 2018, 8:35 PM

Janning⭐

+ 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.

13th Sep 2018, 8:59 AM

Morpheus

+ 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.

13th Sep 2018, 10:03 AM

Janning⭐