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