How Can I Make My Website Look Better On Mobile?

I have a problem with this website. It looks out exactly how I wanted on PC, so I got some hosting service and domain and I tried opening it on my phone and it looks absolutely rid

Solution 1:

You need to learn responsive web design, you can't just add the meta tag and expect your website to turn mobile friendly (I know, it's disappointing). You have to add media queries and use vh, vw, rem, and percents when necessary. Freecodecamp has a great course of responsive web design. Make sure you keep that meta tag, or otherwise media queries won't work on other devices.

And please make sure you search for an answer before posting a question, else you will get downvotes

Solution 2:

So, there are a few ways this can be done. I'll do my best to describe a few of them here but as @Love2Code said, you really need to learn responsive web design as there isn't a simple on/off switch you can add to do what you want.

The most basic way is to add a @media tag to your code. Here's an example:

@media only screen and (max-width: 1080px) {
//updated styles for your mobile elements that will become active when the screen 
//is smaller than 1080px
}

I recommend putting this tag at the end of your code.

Another way of doing this is to make your website responsive by design through use of a smart CSS layout. My personal favorite are the grid and flex display methods. You can find some great examples of that here.

Yet another method I would recommend in regards to fonts is to set your initial font-size to a default px amount inside the body tag of your CSS and then set the font-size of any following elements to a em value. An em value is simply a percent of the size of the default value (so a font-size: 2em would be 2 times larger than the default size). Then, you can simply adjust your default font-size in your body tag and the changes will be made seamlessly throughout your page. Here's an example:

body {
   font-size: 24px;
}
h1 {
   font-size: 3em;
}
@media only screen and (max-width: 1000px) {
   body {
      font-size: calc(12px + 12 * ((100vw - 320px) / 1600));
      //this is a simple css calculation that will gradually adjust the font-size as the 
      //screen width changes between two points
}
@media only screen and (max-width: 320px) {
   body {
      font-size: 12px;
   }
}

To explain that calc above, here is the breakdown of that if you're interested.

font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

Lastly, I recommend adding a viewport meta tag to your HTML.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This will keep your content from being scaled, or zoomed out, by browsers on smaller screens. This is huge when it comes to making your own custom web CSS because the browser may override those without this tag.

These are some of the best tools for making a website responsive. However, I highly recommend checking out a course online as @Love2Code said. Self-teaching is great and can work in some cases but, at the bare minimum it's good to know something about what is going on so that when you have questions you can ask about specifics.

I hope that was helpful.