分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了由于 CSS 问题，Wordpress 在移动设备上崩溃，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决由于 CSS 问题，Wordpress 在移动设备上崩溃？

开发过程中遇到由于 CSS 问题，Wordpress 在移动设备上崩溃的问题如何解决？下面主要结合日常开发的经验，给出你关于由于 CSS 问题，Wordpress 在移动设备上崩溃的解决方法建议，希望对你解决由于 CSS 问题，Wordpress 在移动设备上崩溃有所启发或帮助；

我的 wordpress 网站出现问题。每当我使用以下 CSS 时。我的网站在移动版上崩溃了（但在电脑上没有）“https://...反复出现问题”

.about-text .iwt-text {
    Font-size: 16px;
    line-height: 1.38;
    max-wIDth: 245px;
}

#Js {
    display: none !important;
}


.about-text .iwt-icon img {
    wIDth: 19px;
    height: 23px;
    margin-top: 3px;
}

.about-heading {
    text-transform: uppercase;
    margin: 0 0 5% 0% !important;
}


.header {
    padding-top:40px;
    padding-bottom:30px;
}

.header h1 {
    color:#000640;
}

/** SPEAKERS **/
#speaker h2 {
    Font-size: 36px;
    Font-weight: normal;
    line-height: 1.11;

    margin-bottom: .5em;

    letter-spacing: 2px;

    color: #000640;
}

@media (min-wIDth: 1000pX) {
    #speaker h2 {
        Font-size: 120px;
        Font-weight: bold;
        line-height: .67;

        position: absolute;
        bottom: 4px;

        margin: 0;
        margin-left: -7rem;

        letter-spacing: 7.54px;

        opacity: .44;
        color: #dee0f1 !important;
    }

    #speaker h3,#speaker h1,#speaker p {
        color: #fff !important;
    }

    #speaker h3 {
        margin-top: 3rem;
    }

    #speaker p {
        margin-bottom: 7rem !important;
    }

    #speaker .row-bg-wrap::after {
        position: absolute;
        top: 0;
        left: -35vw;

        display: block;

        wIDth: 123vw;
        height: 100%;

        content: '';

        BACkground: url(https://albertablockchain.com/wp-content/uploads/2020/01/group-1219.svg) center / cover no-repeat;
    }

    #speaker {
        margin-top: 4rem;
    }

    #speaker img {
        margin-top: -4rem;
    }
}

#speaker h3 {
    margin-bottom: 20px;
}

#speaker h1 {
    Font-size: 34px;
    Font-weight: bold;

    margin-bottom: 35px;

    letter-spacing: 1.5px;
}

@media (min-wIDth: 1000pX) {
    #speaker p {
        max-wIDth: 414px;
        margin-bottom: 15%;
    }
}

div.speaker-line img {
    wIDth: 100%;
}

div.single-speaker {
    display: flex;
    flex-flow: column;
    justify-content: space-between;

    height: 100%;
    padding: 1.5rem;
}

div.single-speaker div.top {
    display: flex;
    align-items: flex-start;
}

div.single-speaker div.top img {
    wIDth: 82px !important;
}

@media (max-wIDth: 1000pX) {
    div.single-speaker div.top {
        flex-flow: column;
    }
}

div.single-speaker img {
    wIDth: auto;
    margin-right: 1.5rem;
}

div.single-speaker img + div > p {
    padding: 0;
}

div.single-speaker p {
    line-height: 1.57;

    color: #333;
}

div.single-speaker a {
    Font-size: 12px;
    line-height: 1.83;

    color: #3c4bd8;
}

div.single-speaker h2 {
    Font-size: 16px;
    line-height: 1.56;

    margin-top: 1em;

    letter-spacing: 1.07px;

    color: #142098;
}

div.popup-trigger {
    cursor: pointer;
    Transition: Box-shadow .3s ease-in-out;

    Box-shadow: 0 25px 81px -37px rgba(24,27,61,.27) !important;
}

div.popup-trigger:hover {
    Box-shadow: 0 25px 81px -37px rgba(24,.7) !important;
}

div.popup-trigger div.vc_column-inner > div.wpb_wrapper {
    display: grID;
    grID-template-rows: auto 1fr;

    height: 100%;
}

div.popup-trigger div.wpb_raw_code > div.wpb_wrapper {
    height: 100%;
}

/** SPEAKERS GRID */
.speakers {
    display: grID;
    gap: 1.5rem;
}

.speakers .item {
    display: grID;
    grID-template-rows: auto 1fr;

    Transition: Box-shadow .3s ease-in-out;

    @R_502_5559@-radius: 4px;
    BACkground: #fff;
    Box-shadow: 0 25px 81px -37px rgba(24,.27);
}

.speakers .item.trigger {
    cursor: pointer;
}

.speakers .item:hover {
    Box-shadow: 0 25px 81px -37px rgba(24,.7);
}

.speakers .item .img img {
    wIDth: 100%;
    margin: 0;
}

@media (min-wIDth: 1000pX) {
    .speakers {
        grID-template-columns: repeat(3,1fr);
    }
}

@media all and (-ms-high-contrast: nonE),(-ms-high-contrast: activE) {
    .speakers {
        display: flex;
        flex-wrap: wrap;
    }

    .speakers .item {
        display: flex;
        flex-flow: column;
        flex-basis: 30%;
    }
}

.speaker-modal {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;

    display: flex;

    wIDth: 100vw;
    height: 100vh;

    transform: scale(0);
    pointer-events: none;

    BACkground: #fff;
}

.speaker-modal.active {
    transform: scale(1);
    pointer-events: all;
}

.speaker-modal .modal-image img {
    wIDth: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: top;
}

.speaker-modal div.modal-left {
    overflow-y: auto;
    
    max-height: 100%;
    padding: 6rem;
}

@media (min-wIDth: 1000pX) {
    .speaker-modal > div {
        flex-basis: 50%;
    }

    .speaker-modal div.modal-left {
        display: flex;
        align-items: flex-start;
        flex-flow: column;
        justify-content: center;
    }
}

@media (max-wIDth: 1000pX) {
    .speaker-modal div.modal-image {
        max-height: 50vh;
    }
}

.speaker-modal div.modal-left::-webkit-scrollbar {
    wIDth: 0;
}

.speaker-modal .Js-close-modal {
    position: absolute;
    top: 3rem;
    right: 3rem;

    display: flex;
    align-items: center;
    justify-content: center;

    wIDth: 51px;
    height: 51px;

    content: '';
    cursor: pointer;

    @R_502_5559@-radius: 100%;
    BACkground: #fff;
}

.speaker-modal .Js-close-modal::after {
    position: absolute;

    display: block;

    wIDth: 25px;
    height: 25px;

    content: '';

    BACkground: url(https://albertablockchain.com/wp-content/plugins/VC_Modal_Popup/img/cross.png) no-repeat center center;

    filter: brightness(0);
}

.speaker-modal div.modal-left img {
    wIDth: 164px !important;
    object-fit: contain;
}

.speaker-modal div.modal-left h2 {
    Font-size: 20px;
    line-height: 1.25;

    margin-bottom: .5em;

    letter-spacing: 1px;

    color: #142098;
}

.speaker-modal div.modal-left a {
    Font-size: 12px;
    line-height: 1.83;

    color: #3c4bd8;
}

.speaker-modal .modal-social {
    display: flex;
    align-items: center;
}

.speaker-modal .modal-social i {
    Font-size: 20px;

    color: #142098;
}

@media (max-wIDth: 1000pX) {
    .speaker-modal {
        flex-flow: column-reverse;
    }

    .speaker-modal div.modal-left {
        padding: 1.5rem;
    }

    .speaker-modal .Js-close-modal {
        top: 1.5rem;
        right: 1.5rem;
    }
}