Absolute position will broken on different devices!🫣how fix? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

Absolute position will broken on different devices!🫣how fix?

I created some divs on html and I gave styles to them as :before. I defined those positions to absolute but when I open the file on another laptop, it doesn't work! The places are different! How can I fix it? Is it related to px and %? I mean I should define the places by %?

31st Oct 2023, 8:07 PM
Sara Hashemi
Sara Hashemi - avatar
19 Answers
+ 5
I see a lot of position: absolute in the CSS. This could be the issue. There are a few ways to fix it, one way is you could set some media queries for different sized screens and then reposition your centers for each size. You should look up a bit more about responsive CSS and you might find the answer there.
2nd Nov 2023, 9:31 PM
Ausgrindtube
Ausgrindtube - avatar
+ 5
New Game so you can see section 2? There are 4 numbers in circles by different color. They have borders too. But the borders places are broken. I mean circles should be on center of borders but they aren't. Ausgrintube solved the problem actually. It related to responsive CSS.
5th Nov 2023, 7:37 AM
Sara Hashemi
Sara Hashemi - avatar
+ 5
Fantastic i'm happy you were able to solve the issue Sara Hashemi. Nice work Ausgrindtube
5th Nov 2023, 3:19 PM
Chris Coder
Chris Coder - avatar
+ 4
Chris Coder yeah section 2
5th Nov 2023, 7:29 AM
Sara Hashemi
Sara Hashemi - avatar
31st Oct 2023, 9:16 PM
Ausgrindtube
Ausgrindtube - avatar
+ 3
So what exactly is the issue? Are you talking about the circles in section 2?
4th Nov 2023, 11:20 PM
Chris Coder
Chris Coder - avatar
+ 2
Ausgrindtube thank you🥲
31st Oct 2023, 10:10 PM
Sara Hashemi
Sara Hashemi - avatar
+ 2
New Game can you see the link on github? If it's possible to you, open this on laptop or pc. Look at the second section that there are some numbers in circles. These are placed on center of their borders but when I run this code on other laptop, they aren't center! https://github.com/sarahshmn/seomy.git
2nd Nov 2023, 9:27 AM
Sara Hashemi
Sara Hashemi - avatar
+ 2
New Game you can see the green button. Click on the arrow of that and you can see the dowload zip. After that, extract the file and open the HTML file.
3rd Nov 2023, 11:23 AM
Sara Hashemi
Sara Hashemi - avatar
+ 1
No, like having the code in your library. Like this: https://sololearn.com/compiler-playground/Wrvoi333LFkG/?ref=app
31st Oct 2023, 10:03 PM
Annihilate
Annihilate - avatar
+ 1
Trey yes I do.
31st Oct 2023, 10:09 PM
Sara Hashemi
Sara Hashemi - avatar
+ 1
Ausgrindtube so this won't fix by giving % instead of px, right?
3rd Nov 2023, 11:19 AM
Sara Hashemi
Sara Hashemi - avatar
+ 1
New Game 😥😥😥
3rd Nov 2023, 8:48 PM
Sara Hashemi
Sara Hashemi - avatar
0
Do you have the code saved?
31st Oct 2023, 9:06 PM
Annihilate
Annihilate - avatar
0
Can you show it to us like I did?
1st Nov 2023, 9:18 PM
Annihilate
Annihilate - avatar
0
How do I open the files?
2nd Nov 2023, 8:28 PM
Annihilate
Annihilate - avatar
0
All I saw were a bunch of images.
3rd Nov 2023, 8:45 PM
Annihilate
Annihilate - avatar
0
Is anyone else getting the same thing?
3rd Nov 2023, 10:44 PM
Annihilate
Annihilate - avatar
0
No, I mean the github on scetion 7
5th Nov 2023, 12:06 AM
Annihilate
Annihilate - avatar