简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
My website displays fine on desktop but not on mobile screen
P粉827121558
P粉827121558 2024-03-30 15:09:41
0
1
442

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
P粉6475042832024-03-31 00:51:36 1 floor

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.

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！