媒体查询未对特定屏幕宽度应用样式 - 寻求帮助

Media Queries Not Applying Styles for Specific Screen Widths - Seeking Assistance

提问人:Anosha Sohail 提问时间:11/17/2023 最后编辑:Anosha Sohail 更新时间:11/17/2023 访问量:18

问:

@import "assets/variables/light.scss";
#join-copy {
    .bg-white {
        background-color: $white;
    }
    .join-us-new-heading {
        color: $heading-color;

        font-size: $fs_14xl;
    }
    .join-us-new-desc {
        color: $heading-color;
        font-size: $fs-base;
    }
    .join-us-new-header {
        padding: 6rem;
        height: 18.125rem;
        background-image: url("/images/community-banner.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        font-family: "Satoshi";
        display: flex;
        align-items: center;
        text-align: center;
        .join-us-new-desc {
            font-size: $fs_2xl;
        }
        .community-card-container {
            /*  max-height: 8.5625rem; */
            gap: 4.5rem;
            justify-content: center;
            position: relative;
            top: 35px;
            left: -15px;
            z-index: 1;
            .ant-card {
                max-width: 18.75rem;
                /* background: #ff000054; */
                border-radius: 0.75rem;
                .ant-card-body {
                    padding: 1.6px !important;
                }
            }
            .comunity-details {
                padding: 0.5rem 0;
                text-align: left;
                color: $heading-color;
                font-family: "IBM Plex Sans";
            }
            .community-btn {
                border-radius: 0.25rem;
                padding: 0.3rem 0.75rem;
                height: auto;
                color: $white;
                font-size: $fs_sm;
                margin-left: 2.5rem;
            }
            .is-gradiant {
                background: linear-gradient(
                    180deg,
                    #9d41a5 0%,
                    #d74669 32.29%,
                    #e95950 70.83%,
                    #f8bd01 100%
                ) !important;
            }
            .join-community {
                padding-right: 1.25rem;
            }
            .our-platform {
                font-size: $fs_sm;
                letter-spacing: 0.014rem;
            }
            .followers {
                font-size: $fs_2xl;
            }
        }
    }
    .join-us-main-con {
        /* margin-top: 9rem; */
        /* .card-align {
            align-items: flex-start;
            flex-direction: row;
        } */
        .joinus-cards {
            margin-top: 10rem;
            .join-social-card {
                background: #ffffff;
                border-radius: 1.125rem;
                border: 1px solid #eaeaea;
                /*  min-height: 20.0625rem; */
                text-align: left;
                max-width: 18.5rem;
                font-family: "IBM Plex Sans";
                .ant-card-body {
                    padding: 0;
                }
                .join-new-card {
                    padding: 1.9rem;
                    flex-direction: column;
                    gap: 1rem;
                    .join-img-circle {
                        height: 60px;
                        width: 60px;
                        /* text-align: center; */
                        border-radius: 50%;
                        background: #fafafa;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
                .join-main-title {
                    color: #2b2b2b;
                    font-size: $fs_2xl;
                }
                .join-main-desc {
                    color: $heading-color;
                    font-size: $fs-base;
                }
            }
        }
        .community-section {
            padding-left: 11.5rem;
            font-family: "IBM Plex Sans";
            .com-cards {
                .ant-card-body {
                    padding: 0 !important;
                }
            }
            .community-cards {
                border-radius: 4.0625rem;
                padding: 1.25rem;
                border: 1px solid #eaeaea;
                max-width: 19.4375rem;
                min-width: 220px;
                .social-icon {
                    padding-right: 2.19rem !important;
                }
                .social-title {
                    font-size: $fs-base;
                    font-family: "Satoshi";
                    color: $heading-color;
                }
            }
        }
        .bitnasdaq-community {
            .bit-comunity {
                gap: 11.5rem;
            }
        }
        .community-querries {
            display: flex;
            justify-content: center;
            margin: 0rem 11rem;
            .ant-row-flex {
                /* display: flex;
                align-items: center; */
                padding: 2rem 4rem;
                background-image: url("/images/community-querries-bg.png");
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }
            .help-btn-container {
                text-align: end;
            }
            .help-btn {
                padding: 0rem 2.555rem;
                border-radius: 4px;
            }
            .join-us-new-heading {
                font-size: $fs_7xl;
            }
        }
    }

    @media screen and (max-width: 1440px),
        (min-width: 1153px) and (max-width: 1195px) {
        .main-content {
            padding: 0 25px;
        }
    }
    @media screen and (max-width: 1100px) {
        .join-us-new-header {
            .community-card-container {
                gap: 3.5rem !important;
                left: 0;
            }
        }
        .bitnasdaq-community {
            .bit-comunity {
                gap: 9.5rem;
            }
        }
        .community-querries {
            margin: 0rem 9.5rem;
        }
    }

    @media screen and (max-width: 1000px) {
        .main-content {
            background-color: #9d41a5;
        }
        .community-card-container {
            gap: 1.5rem !important;
        }
        .join-us-main-con {
            .joinus-cards {
                .join-social-card {
                    .ant-col-lg-6 {
                        width: 28% !important;
                    }
                }
            }
            .bitnasdaq-community {
                .bit-comunity {
                    gap: 6.5rem;
                }
            }
            .community-querries {
                margin: 0rem 8rem;
            }
        }
    }
}

我目前面临一个问题,即我对 max-width: 1100px 和 max-width: 1000px 的媒体查询没有应用预期的样式。我已经验证了代码的语法和结构,一切似乎都是正确的。但是,在不同的屏幕大小上进行测试时,这些媒体查询中的样式不会生效。它在 800px 下工作,我不需要它。

HTML CSS vue.js web-development-server

评论


答: 暂无答案