Muhammad Muhammad - 7 months ago 18
HTML Question

CSS on Mobile is not working

I have the following CSS. For some reason, it works until the @max-width:767 media query. However, it does not work but does not work on the resolution, immediately below it, that is, @425. After that, it it starts working again on resolutions below it. Any help identifying this issue would be appreciated.

@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

Maybe it's because of a missing closing bracket here:

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

As a tip, i recommend you always validate your css: https://jigsaw.w3.org/css-validator/ you can upload your css file or paste your code there. That way, things like a missing brackets or a typo, won't become a headache :)

Let me know if this helped you.

Comments