Web get messed up when accessing it from phone

Hi!! I am trying to build my first project, IT WORKS fine on my pc but when I open it from my phone it get messed up.
Here is the code: https://codepen.io/DanHu/pen/QWaMKQr

There is also no background color on phone
Challenge: Build a Tribute Page

Link to the challenge:

Well yeah? A phone has a completly different dimensions than a PC.
That’s why you need advanced CSS to create responsive designs to adjust to all kinds of different resolutions and basically have a different page layout for different devices.
Or use a library like Bootstrap which already comes with a lot of pre-defined classes and usability.

but i used percentages in all of my functions…

Please send a screenshot from BOTH the computer and phone that are being used, so we can better help you.

When I access it from my phone, It appears as it does on my browser.

phone2
Hey tysm for your reply, i was working on it and i fixed the issue. But one problem left, the text on phone at the end is annoying to read and is in the very center of the screen.


but its fine from PC, and also i am not sure why the colors change which is annoying

Do you have dark mode on in your phone?

1 Like

Oh my god yes please don’t tell me its the problem :sob::joy:

: )

Try to turn t off for a moment. It’s easy to forget that dark mode is on.
Remember, it can also create problems for doing tutorial challenges on freeCodeCamp to use the device on dark mode.

2 Likes

Everything should be working now… can i have some feedback from you guys on this project

So one quick thing to keep in mind is that for example the dots for the list-items take up a lot of space which is hardly noticable on a big screen but suddenly makes up a lot on a small screen.

On top of that, the inspection tool on some browsers include an option to simulate different devices. You get into the tool via F12, into inte the inspection tab and see if there is a symbol for it. Chrome had it for a while and Firefox also does. It’s generally an extremly useful tool for webdev, as it allows to experiment with CSS, select elements and have them highlight margin and padding and a lot more stuff…

1 Like

Yes, of Course.

Go ahead and Submit the https://codepen.io/DanHu/pen/QWaMKQr again, under the Project Feedback category.

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