Why does some code look perfect on computers and look like trash on phone😪😪. And is there a way to make them both look great😥

Answer 1

Use meta viewport for scaling and try to use rem vh instead of px for sizing this will make website respond to size of the device.
Some function are made specifically for desktop like mouseover so that try to use other tag wisely.

Answer 2

are you using meta viewport tag in the head of html? Cuz with proper CSS you can make both phone and desktop look beautiful.

Answer 3

Sololearn have a Responsive Web Design course.

Answer 4

The best way to use media queries is:
@media screen and (max-width: ...px){
.div{
font-size: 30px;
}
}
In this code, we have indicated that "h1" when the screen is less than ... pixels, will have a size of 30px
In fact, website responsiveness is a very broad topic. I advise you to search the Internet: adaptive layout for beginners
You can also watch this course:
https://www.sololearn.com/Course/Responsive-Web-Design/?ref=app