CSS на мобильном устройстве не работает

Question

У меня есть следующий CSS. По какой-то причине он работает до медиа-запроса @ max-width: 767. Однако он не работает, но не работает над разрешением, сразу же под ним, то есть, @ 425. После этого он снова начинает работать над резолюциями ниже. Любая помощь в определении этой проблемы будет оценена по достоинству.

@media only screen and (max-width: 767px) { 


    header{height:auto;} body{padding-top:90px;} 
    #div-header-submenu-rtl, #div-header-submenu {top:-5%; left:25%;} 
    .text-center-767{text-align:center; padding-top:5px;} 
    .search-div, .search-div-rtl{width:100%; margin-left:3px;} .search-div-rtl{padding-right:10px; margin-right:0px;} 
    .txt-search{width: 85%;} 
    .timeline-poster-name{ margin-top:auto;} 
    .btn-comment-submit{width:20%; font-size:10px;} 
    .affiliate-card-padd-3, .affiliate-card-padd-2,.affiliate-card-padd-4{ padding:15px;} 
    .affiliate-card-padd-3-ar, .affiliate-card-padd-2-ar,.affiliate-card-padd-4-ar{ padding:15px;} 

    .affiliate-frame, .select-affiliate, .affiliate-frame-store{ margin:0 auto;} 

    .margin-left-50-767 {margin-left:50px;} 

    .right-content-area {min-height:auto; padding-bottom:30px;} 

    .left-grey-bar{height:auto;} .left-grey-fixed-bar, .fixed-filters-rtl{position:relative;} .left-grey-fixed-bar-rtl, .fixed-filters{position:relative; left:0; } 
    .right-content-area, .left-content-area{min-height:auto;} 

    .top-links-content-tabs, .top-links-content-tabs-highlight {font-size:12px;}  

    .displayInLinePhone{display:inline-block;} 
    .posting-area, .posting-area-division{height:auto;} 
    .comments-container-row {height:auto;} 
    .lnkSectionHeading, .sectionHeading{font-size:12px;} .sectionHeading{ text-align:left; padding-top:20px;} 


    .padd-top-40{padding-top:20px;} .padd-top-20{padding-top:10px;} .padd-top-15{padding-top:7px;} 

    .sm-icon-grey-bar{width:25px; height:25px; margin-top:5px; margin:0 auto;} 


/*---------------------- BUSINESS PRODUCT -------------------------------------- */ 
#div-main-pic {background-color:#000;} 


/* ------------------ LOGIN PAGE ----------------------------------------------- */ 

    .login-headline {font-size:16px; font-weight:800;} 

    .body-login, .body-login-rtl{background-color:#45c458; background-image:url('../images/login-bg-bhive.jpg'); background-size:auto; background-repeat:no-repeat; background-position:top; } 

    .btn, .input-credentials, .txt-add-product{margin-top:15px;} 
    .mob-background{background-color:rgba(255,255,255,0.7);} 
    .footer{margin-top:5vh;} 


/* ------------------ EXHIBITIONS ----------------------------------------------- */  
    .exhibitions-row{height:auto;} 
    .text-center-767{text-align:center;} 
    .img-exhibit-sponsor{width:173px; height:100px; margin:0 auto;} 

/* ------------------ Market Timeline ----------------------------------------------- */  





} 


@media only screen and (max-width: 425px) 
{ 
    .top-links-content-tabs, .top-links-content-tabs-highlight {font-size:10px;} 
    .left-grey-fixed-bar{position:relative;} .left-grey-fixed-bar-rtl{position:relative; left:auto;} 
    .sm-icon-grey-bar{width:25px; height:25px; margin-top:5px; margin:0 auto;} 
    .font-size-12{font-size:10px;} 
    .font-size-14, .lnk-product-title{font-size:12px;} 
    .text-center-425, .text-center-425-nopadd{text-align:center; padding-top:10px;} .text-center-425-nopadd{text-align:center;} 
    .padding-top-15-425{padding-top:15px;} 
    .display-none-425 {display:none;} 
    #div-header-submenu-rtl, #div-header-submenu {top:15%; left:22%;} 

    /* ----------------------------- MARKET TIMELINE ----------------------------- */ 
    .timeline-posts-text, .timeline-location-text { text-align:center;} 
    .lnk-like-share-comment {font-size:10px;} 
    .span-comment-like-share{text-align:center;} 
    .img-product-timeline-frame{margin-top:40px; margin:0 auto;} 
    .span-comment, .span-like, .span-share, .span-x{padding-left:2px; padding-right:2px; padding-top:10px; display:block; text-align:center;} 

    .span-like, .span-share, .span-comment, .span-x{width:100%; } 
    #share-update{border:1px solid #f1f1f1; 
    .post-button{padding:0;} 
    .video-thumbnail-custom{width:171px; height:114px; margin:0 auto;} 

    .sectionHeading-no-padd-425{padding:0;} 
    .btn-overlay, .btn-overlay-rtl{ position:absolute; top:55%; left:58%; margin-top:0 !important;} 
.btn-overlay-rtl{left:55%;} 

/*------------------------------------ PRODUCT PAGE -------------------------------*/ 

    .product-header-1, .product-header-2, .product-header-3 {margin-top:30px;} 

    .no-wrap{white-space:nowrap;overflow:hidden;} .no-wrap > div{ float:none; display:inline-table;} 

/*---------------------------------- EXHIBITIONS -------------------------------- */ 

    .img-exhibit-sponsor{width:173px; height:100px; margin:0 auto;} 




} 


@media only screen and (max-width: 375px) 
{ 


    .btn-overlay, .btn-overlay-rtl{ position:absolute; top:55%; left:58%;} 
.btn-overlay-rtl{left:55%;} .video-thumbnail-custom{width:171px; height:114px; margin:0 auto;} 
.row-thumbs{ top:56%;} 

/* --------------------------- BUSINESS PRODUCT ---------------------------------------*/ 
.product-header-1 {font-size:14px;} 
.webkit-padd-left-40{ padding-left:15px;} 


/*---------------------------------- EXHIBITIONS -------------------------------- */ 
.img-exhibit-sponsor{width:173px; height:100px; margin:0 auto;} 

} 


@media only screen and (max-width: 325px) 
{ 


    .btn-overlay, .btn-overlay-rtl{ position:absolute; top:59%; left:61%;} 
.btn-overlay-rtl{left:22.5%;} .video-thumbnail-custom{width:171px; height:114px; margin:0 auto;} 


} 

Answer 1

Может быть, это из-за отсутствующей закрывающей скобки здесь:

#share-update{border:1px solid #f1f1f1; 

В конце, я рекомендую вам всегда проверять ваш CSS: https://jigsaw.w3.org/css-validator/ вы можете загрузить свой файл CSS или вставьте код. Таким образом, такие вещи, как недостающие скобки или опечатка, не станут головной болью :)

Сообщите мне, если это вам помогло.