移动端文本未响应问题求助（VS开发，Chrome测试）

核心问题点 #

• 标题h1设置了white-space: nowrap，强制文本不换行，移动端屏幕宽度有限，直接导致文本溢出容器，无法正常响应。
• .land-image固定了500px宽度，移动端下这个宽度会超出屏幕，挤压文本空间。
• 媒体查询中.landing-container的max-width:50%限制了内容宽度，让文本没有足够的显示空间。
• 移动端h1字号设置为2.5rem，对于小屏设备来说仍然过大，容易溢出。

修改后的完整代码 #

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box; /* 新增，确保内边距和边框不增加元素总宽度 */
    }
    body{
        overflow-x: hidden;
    }

    /*--------------------Landing info and Image Set up-------------*/
    .wrapper {
        width: 100vw;
    }
    .landing-container{
        max-width: 100%; /* 修改为100%，避免限制宽度 */
        margin: 0 auto;
        height: auto;
        min-height: 30vh ;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 0;
        background: white;
        padding: 0 1rem; /* 新增左右内边距，避免内容贴边 */
    }

    button {
        background-color: #8C592C;
        border: none;
        margin-top: 20px;
        width: 200px;
        font-size: 20px;
        font-family: ROBOTO; 
        font-weight: 700; 
        min-height: 70px;
        text-decoration: none;
        border-radius: 20px;
        cursor: pointer; /* 新增，提示可点击 */
    }

    button:hover {
        background-color: #30c2cc;
        color: #dbcb19;
    }

    h1{
        font-family: roboto;
        font-size: 2em;
        line-height: 1.4; /* 修改为相对值，适配不同字号 */
        font-weight: 600;
        color: black;
        text-align: center; /* 新增，确保文本居中 */
        /* 移除white-space: nowrap，允许文本换行 */
    }

    a.no-underline {
        text-decoration: none;
    }

    /*--------------------Targets div to hold image-------------*/
    .land-image{
        width: 100%; /* 修改为100%，适配父容器宽度 */
        max-width: 500px; /* 新增max-width，限制最大宽度，避免大屏下过大 */
        height: auto;
        min-height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem; /* 新增，增加元素间间距 */
    }

    /*--------------------Targets the actual image within the div above-------------*/
    .land-image img{
        width: 100%;
        height: auto;
    }

    /*--------------------Removes platform margins----------------*/
    div.grid-container.fr-view{
        margin: 0;
        padding: 0;
    }

    /*--------------------Code for mobile screens @ 768px-------------*/
    @media only screen and (max-width: 768px) {
        .landing-container {
            flex-direction: column-reverse;
            max-width: 100%; /* 修改为100%，占满屏幕宽度 */
            justify-content: center;
            text-align: center;
        }
        .land-image img {
            width: 85%;
        }
        button {
            width: 100%;
            max-width: 200px; /* 新增max-width，避免小屏下按钮过宽 */
        }
        .text-container {
            font-size: 16px; /* 调整为更适合移动端的字号 */
            font-weight: 100;
        }
        h1 {
            font-size: 1.5rem; /* 缩小移动端字号，避免溢出 */
            line-height: 1.5;
        }
    }
</style>
<script>
</script>
<!--<link href="Main.css" rel="stylesheet">-->
<div class="wrapper">
    <!--------------------Container for landing------------------>
    <div class="landing-container">
        <!--------------------Banner for landing------------------>
        <div class="land-image">
            <img src="https://classicinsurance.s3.amazonaws.com/classicinsurance.png" alt="MGE LOGO" class="fr-fil fr-dib">
            <div class="text-container">
                <h1>"PROTECTION YOU CAN RELY ON, SERVICE YOU CAN TRUST"</h1>
            </div>
            <button>
                <a href="https://insurancetagtitle.com/classic_agency_insurance/shop/page/intropage" style="text-decoration: none;color:#002882;">
                    REQUEST YOUR QUOTE
                </a>
            </button>
        </div>
    </div>
</div>

关键修改说明 #

1. 移除h1的white-space: nowrap：允许文本在移动端自动换行，避免溢出。
2. 调整.land-image宽度：从固定500px改为width:100%+max-width:500px，既适配移动端屏幕，又限制大屏下的最大宽度。
3. 修正媒体查询中.landing-container的max-width：改为100%，让内容占满移动端屏幕，给文本足够显示空间。
4. 优化移动端h1字号：从2.5rem缩小到1.5rem，同时调整line-height确保行间距舒适。
5. 新增box-sizing: border-box：避免内边距和边框导致元素宽度溢出。
6. 增加元素间距和内边距：提升移动端的视觉体验，避免内容贴边。

内容的提问来源于stack exchange，提问作者MGE CustomPrints