时间戳

首页 > 解决方案 > 使我的 flex 列对所有屏幕都有响应，html 文本重叠到下一部分并且列高似乎更短？

css - 使我的 flex 列对所有屏幕都有响应，html 文本重叠到下一部分并且列高似乎更短？

问题描述

嘿，伙计们，我一直在我的投资组合网站上工作，它可以响应移动设备、我的 Macbook Air 和我的两个桌面显示器。但由于某种原因，在我的联想笔记本电脑上，列似乎更短，并且文本超出了列的长度。我是否需要另一个媒体查询，是否需要在我的 css 中修复某些内容？这是 我的问题的屏幕截图

这是代码，媒体查询的最小宽度为 700px

 #skills .container {
        max-width: 1200px;
        text-align: center;
        background: #fff;
        border-radius: 20px;
        height: 70vh;
        box-shadow: 0px 10px 30px rgba(57,56, 61, 0.205);
        display: flex;
        /* -webkit-box-flex: 1;
        flex-grow: 1; */
        
    }

    #skills .container .column {
        display: block;
        padding-left: 15px;
        padding-right: 15px;
        flex-basis: 33%;
        border-bottom: 0px solid #e2e2e2;
        border-right: 1px solid #e2e2e2;
        /* margin-left: 10px;
        margin-right: 10px; */
    }

    #skills .container .column:last-child {
        border-right: none;
        border-bottom: none;
    }

    #skills .container .column #skills-icon{
        margin: 20px 20px;
        font-size: 35px;
        color: #6666ff;

  
    }

    #skills .container .card p {
        font-family: 'Ubuntu';
    }

标签： cssbootstrap-4flexboxresponsive-designmedia-queries

解决方案

你的问题是height: 70vh;你的#skills .container选择器。

您的笔记本电脑屏幕可能具有较低的垂直分辨率，其中 70% 不足以显示您的技能容器的内容。

尝试将其更改为min-height: 70vh;，这样如果内容需要，它可以更高。

推荐阅读