vendredi 11 septembre 2020

How to configure a html site to work on mobile?

I made this site to calculate the GPA of students I'm not quite done but the design is scaring me a bit. On PC the site looks great but on mobile the site looks jumbled up. This is the site https://acaschoolgpa.000webhostapp.com/ As you can see I tried adding this code into my main html

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

But it didn't do anything on mobile. This is the html of the main page.

<!DOCTYPE html>
<html>
<header>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ACA GPA Calculator </title>
        <link rel="stylesheet" href="style.css">
        <link rel="shortcut icon" href="favicon.ico">
    </head>
</header>
<body>
    <img src="aca logo.jpg" width="1000" height="600"
    height="90" alt="HTML tag">

    <nav>
        <ul><h2><a href="index.html"> Home Page</a><br><br>
        <br><br><h2><a href="gpa.html">Calculate GPA</a>
        <br><br><br><br><a href="multiple.html">Calculate GPA of multiple grades</a>
        <br><br><br><br><a href ="about.html">About the Author</a>
        <br><br><br><br><br>
        <footer>
            © 2020 AlNusif
        </footer>
        </h2></ul>
    </nav>

</body>
</html>



Aucun commentaire:

Enregistrer un commentaire