My website displays fine on desktop but not on mobile screen
P粉827121558
P粉827121558 2024-03-30 15:09:41
0
1
463

I design my personal website using HTML/CSS. But the text doesn't scale to the phone. Please refer to the picture below.

The website looks great on desktop, but doesn't display well on mobile devices.

Mobile display

My Google Drive embed doesn't even fit on the phone screen. Mobile phone display GGD PDF embed

What should I do to solve this problem? Thank you so much.

Here is my code:

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>EXAMPLE</title>
        <meta charset="UTF-8"
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="Hoa Dang">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/projects.css">
        <link rel="stylesheet" href="css/nav.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
        <link rel="shortcut icon" type="image/x-icon" href="EXAMPLE"/>
        <link rel="manifest" href="manifest.json">
        <style>
            @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
            </style>
    </head>

    
    <body>
        <nav>
            <input type="checkbox" id="chk">
            <label for="chk" class="show-menu-btn">
                <i class="fas fa-bars"></i>
            </label>

            <ul id="nav-ul">
                <li class="nav-li">
                    <a class="nav-link selected">HOME</a>
                </li>
                
                <li class="nav-li">
                    <a class="nav-link">ABOUT</a>
                </li>

                <li class="nav-li">
                    <a class="nav-link">CV</a>
                </li>
 
                <li class="nav-li">
                   <a class="nav-link">PROJECTS</a>
                </li>

         
                <label for="chk" class="hide-menu-btn">
                    <i class="fas fa-times"></i>
                </label>
            </ul>
        </nav>

        <div id="HOME">
            <div class="center">
                <h1 id="main-header">EXAMPLE</h1>
                <h3 id="sub-header">example.com <span class="green-detail">&</span> example.com</h3>
            </div>
        </div>

        <div id="CV">
            <div class="center">
                <iframe src="example.com" width="640" height="480" allow="autoplay"></iframe>
            </div>
        </div>

        <div id="PROJECTS" class="center">
            <div id="img-container"></div>
        </div>

        <div id="ABOUT">
            <div class="center">
                <h2 id="about-header">example.comE<span class="green-detail">:</span></h2>
                <p id="about-text">
                    <br> Text
                    <br> <br> 
                </p>
            </div>
        </div>
        
        <footer>
            <ul id="sm-ul">                
                <li class="sm-li">
                    <a class="sm-logo" href="example.com" target="_blank">
                        <i class="fab fa-youtube"></i>
                    </a>
                </li>

                <li class="sm-li">
                    <a class="sm-logo" href="example.com" target="_blank">
                        <i class="fab fa-instagram"></i>
                    </a>
                </li>

                <li class="sm-li">
                    <a class="sm-logo" href="example.com" target="_blank">
                        <i class="fab fa-facebook"></i>
                    </a>
                </li>

                <li class="sm-li">
                    <a class="sm-logo" href="example.com" target="_blank">
                        <i class="fab fa-linkedin"></i>
                    </a>
                </li>
            </ul>
        </footer>

    </body>
</html>

CSS

* { padding: 0; margin: 0; }

:root {
    --base-color: #d2dae2;
    --secondary-color: #0be811;
}

body {
    background-color: #1e272e;
    font-family: 'DM Sans', sans-serif;
    color: var(--base-color);
    overflow: scroll;
}

body::before{
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-image: url("example.com");
    background-size: cover;
    background-position: top-center;
    opacity: 0.2;
    filter: blur(7px);
}

nav, footer, #about-text, #contact-container {
    width: 100%;
}

nav {
    margin-top: -30px;
    position: fixed;
    top: 0;
    text-align: right;
    z-index: 2;
}

footer {
    position: fixed;
    bottom: 0;
    padding: 5vh;
}


#about-text, #sub-header {
    font-size: 2.3vh;
    line-height: 1.6;
    font-weight:400;
}

#main-header, #sub-header {
    text-align: center;
}

#main-header {
    font-size: 8.5vh;
}

#nav-ul {
    padding-right: 5vh;
}

#sm-ul, #nav-ul {
    list-style-type: none;
}


#about-header {
    font-size: 4vh;
    font-weight: bold;
}

.center, #contact-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.sm-logo {
    color: var(--base-color);
    font-size: 3vh;
    transition: 0.2s ease-in;
}

.sm-logo:hover, .nav-link:hover, .nav-link.selected, .green-detail {
    color: var(--secondary-color);
}

.sm-li {
    display: inline-block;
    margin-left: 5vh;
}

.nav-link {
    font-size: 1.8vh;
    cursor: pointer;
    text-decoration: none;
    transition: 0.2s ease-in;
}

.nav-li {
    display: inline-block;
    margin: 5vh 5vh 0 0;
}

@media screen and (max-width: 650px) {

    nav, footer, #nav-top, #nav-ul, .nav-link {
        padding: 0;
        margin: 0;
    }

    #sm-ul, #nav-ul {
        text-align: center;
    }

    .sm-li {
        margin: 0 2vh 5vh 2vh;
    }

    .nav-li {
        margin: 5vh 2vh 0 2vh;
    }
}

P粉827121558
P粉827121558

reply all(1)
P粉647504283

The reason your site isn't displaying as expected on mobile devices is that you need more media queries to specify layout and design based on dimensions. You have a media query. Use the following media query to change the browser's size, using code so it resembles your expected result:

/* Media Queries */

@media (min-width:320px)  { /* Vertical Screen Phones */ 
    
}

@media (min-width:480px)  { /* Horizontal/Landscape Screen Phones */ 
    
}

@media (min-width:600px)  { /* Tablets and Vertical iPads */
    
}

@media (min-width:801px)  { /* Tablet, Horizontal/Landscape iPads, low-resolution Laptops */
     
}

@media (min-width:1025px) { /* Big Tablets */
     
}

@media (min-width:1281px) { /* Laptops and Desktops */
    
}

Also, I recommend sticking to rem or em instead of vh. It is more widely used and more scalable.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template