#1217 Templates: Right side is cutt off when page size greater than 1024px

modules/base/profile/template/css/main.css

@@ -261,78 +261,69 @@ a.bx-base-pofile-cover-image:hover,
     width: calc(16.6%);
 }
 
-@media (min-width:533px) and (max-width:1024px) {
-        .bx-layout-column-wide .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover,
-        #sys_search_results .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover,
-        .bx-layout-column-fullwidth .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover {
-        -webkit-flex: 0 0 49.8%;
-        -ms-flex: 0 0 49.8%;
-        flex: 0 0 49.8%;
-    }
-
-	.bx-base-unit-showcase-wrapper .bx-base-pofile-unit-showcase
-	{
-		width:calc(50%);
-	}
-    .bx-layout-column-thin .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-showcase
-	{
-		width:calc(100%);
-	}
-
-	.bx-base-unit-showcase-wrapper .bx-base-pofile-unit-wo-info-showcase
-	{
-		width:calc(10.0%);
-	}
-    .bx-layout-column-thin .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-wo-info-showcase
-	{
-		width:calc(16.6%);
-	}
-}
-
-@media (min-width:1024px) {
-    .bx-layout-column-wide .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover {
-        -webkit-flex: 0 0 49.8%;
-        -ms-flex: 0 0 49.8%;
-        flex: 0 0 49.8%;
-    }
-    #sys_search_results .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover,
-    .bx-layout-column-fullwidth .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover {
-        -webkit-flex: 0 0 33.25%;
-        -ms-flex: 0 0 33.25%;
-        flex: 0 0 33.25%;
-    }
-
-	.bx-base-unit-showcase-wrapper .bx-base-pofile-unit-showcase
-	{
-		width:calc(33.3%);
-	}
-    .bx-layout-column-thin .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-showcase
-	{
-		width:calc(100%);
-	}
-    .bx-layout-column-half .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-showcase
-	{
-		width:calc(50%);
-	}
-
-	.bx-base-unit-showcase-wrapper .bx-base-pofile-unit-wo-info-showcase
-	{
-		width:calc(6.25%);
-	}
-    .bx-layout-column-thin .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-wo-info-showcase
-	{
-		width:calc(25.0%);
-	}
-    .bx-layout-column-half .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-wo-info-showcase
-	{
-		width:calc(10.0%);
-	}
+/* MEDIA: tablet2 */
+
+.bx-media-tablet2 .bx-layout-column-wide .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover,
+.bx-media-tablet2 #sys_search_results .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover,
+.bx-media-tablet2 .bx-layout-column-fullwidth .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover {
+    -webkit-flex: 0 0 49.8%;
+    -ms-flex: 0 0 49.8%;
+    flex: 0 0 49.8%;
+}
+
+.bx-media-tablet2 .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-showcase {
+    width:calc(50%);
+}
+.bx-media-tablet2 .bx-layout-column-thin .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-showcase {
+    width:calc(100%);
+}
+
+.bx-media-tablet2 .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-wo-info-showcase {
+    width:calc(10.0%);
+}
+.bx-media-tablet2 .bx-layout-column-thin .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-wo-info-showcase {
+    width:calc(16.6%);
 }
 
+/* MEDIA: desktop */
+
+.bx-media-desktop .bx-layout-column-wide .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover {
+    -webkit-flex: 0 0 49.8%;
+    -ms-flex: 0 0 49.8%;
+    flex: 0 0 49.8%;
+}
+.bx-media-desktop #sys_search_results .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover,
+.bx-media-desktop .bx-layout-column-fullwidth .bx-base-pofile-units-wrapper .bx-base-pofile-unit-with-cover {
+    -webkit-flex: 0 0 33.25%;
+    -ms-flex: 0 0 33.25%;
+    flex: 0 0 33.25%;
+}
+
+.bx-media-desktop .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-showcase {
+    width:calc(33.3%);
+}
+.bx-media-desktop .bx-layout-column-thin .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-showcase {
+    width:calc(100%);
+}
+.bx-media-desktop .bx-layout-column-half .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-showcase {
+    width:calc(50%);
+}
+
+.bx-media-desktop .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-wo-info-showcase {
+    width:calc(6.25%);
+}
+.bx-media-desktop .bx-layout-column-thin .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-wo-info-showcase {
+    width:calc(25.0%);
+}
+.bx-media-desktop .bx-layout-column-half .bx-base-unit-showcase-wrapper .bx-base-pofile-unit-wo-info-showcase {
+    width:calc(10.0%);
+}
+
+
 
 /* view page */
 .bx-base-profile-entity-content,
 .bx-base-profile-entity-content p {
     overflow: hidden;
     text-overflow: ellipsis;
-}
+}

modules/base/text/template/css/main-media-phone.css

@@ -1,9 +1,9 @@
-@media (max-width:720px) {
-	/* view page */
-	.bx-base-text-attachments .bx-base-text-attachment.bx-def-gal-img-size,
-	.bx-base-text-attachments .bx-base-text-attachment.bx-def-gal-img-size img,
-	.bx-base-text-attachments .bx-base-text-attachment.bx-def-gal-img-size video {
-	    width: 16.175rem;
-	    height: 10.725rem;
-	}
-}
+
+/* view page */
+.bx-media-phone .bx-base-text-attachments .bx-base-text-attachment.bx-def-gal-img-size,
+.bx-media-phone .bx-base-text-attachments .bx-base-text-attachment.bx-def-gal-img-size img,
+.bx-media-phone .bx-base-text-attachments .bx-base-text-attachment.bx-def-gal-img-size video {
+    width: 16.175rem;
+    height: 10.725rem;
+}
+

modules/base/text/template/css/main.css

@@ -153,63 +153,63 @@ div.bx-base-text-breadcrumb i {
     overflow:hidden;
 }
 
-@media (min-width:533px) and (max-width:720px) {
-    .bx-layout-column-half .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery,
-    .bx-layout-column-thin .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery {
-        -webkit-flex: 0 0 49.8%;
-        -ms-flex: 0 0 49.8%;
-        flex: 0 0 49.8%;
-    }
-	
-	.bx-base-unit-showcase-wrapper .bx-base-text-unit-showcase
-	{
-	   width:calc(50%);
-	}
-}
-
-@media (min-width:533px) and (max-width:1024px) {
-    .bx-layout-column-wide .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery,
-    #sys_search_results .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery,
-    .bx-layout-column-fullwidth .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery {
-        -webkit-flex: 0 0 49.8%;
-        -ms-flex: 0 0 49.8%;
-        flex: 0 0 49.8%;
-    }
-	
-	.bx-base-unit-showcase-wrapper .bx-base-text-unit-showcase
-	{
-	   width:calc(50%);
-	}
-}
-
-@media (min-width:1024px) {
-    .bx-layout-column-wide .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery {
-        -webkit-flex: 0 0 49.8%;
-        -ms-flex: 0 0 49.8%;
-        flex: 0 0 49.8%;
-    }
-    #sys_search_results .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery,
-    .bx-layout-column-fullwidth .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery {
-        -webkit-flex: 0 0 33.25%;
-        -ms-flex: 0 0 33.25%;
-        flex: 0 0 33.25%;
-    }
-	
-    .bx-layout-column-thin .bx-base-unit-showcase-wrapper .bx-base-text-unit-showcase {
-	   width:calc(100%);
-    }
-
-    .bx-layout-column-half .bx-base-unit-showcase-wrapper .bx-base-text-unit-showcase,
-	.bx-layout-column-wide .bx-base-unit-showcase-wrapper .bx-base-text-unit-showcase {
-	   width:calc(50%);
-	}
-
-	#sys_search_results  .bx-base-unit-showcase-wrapper .bx-base-text-unit-showcase,
-    .bx-layout-column-fullwidth  .bx-base-unit-showcase-wrapper .bx-base-text-unit-showcase {
-	   width:calc(33.3%);
-    }
+/* MEDIA: phone2 */
+
+.bx-media-phone2 .bx-layout-column-half .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery,
+.bx-media-phone2 .bx-layout-column-thin .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery {
+    -webkit-flex: 0 0 49.8%;
+    -ms-flex: 0 0 49.8%;
+    flex: 0 0 49.8%;
+}
+
+.bx-media-phone2 .bx-base-unit-showcase-wrapper .bx-base-text-unit-showcase {
+   width:calc(50%);
+}
+
+/* MEDIA: tablet2 */
+
+.bx-media-tablet2 .bx-layout-column-wide .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery,
+.bx-media-tablet2 #sys_search_results .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery,
+.bx-media-tablet2 .bx-layout-column-fullwidth .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery {
+    -webkit-flex: 0 0 49.8%;
+    -ms-flex: 0 0 49.8%;
+    flex: 0 0 49.8%;
+}
+
+.bx-media-tablet2 .bx-base-unit-showcase-wrapper .bx-base-text-unit-showcase {
+   width:calc(50%);
 }
 
+/* MEDIA: desktop */
+
+.bx-media-desktop .bx-layout-column-wide .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery {
+    -webkit-flex: 0 0 49.8%;
+    -ms-flex: 0 0 49.8%;
+    flex: 0 0 49.8%;
+}
+.bx-media-desktop #sys_search_results .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery,
+.bx-media-desktop .bx-layout-column-fullwidth .bx-base-text-unit-gallery-wrapper .bx-base-text-unit-gallery {
+    -webkit-flex: 0 0 33.25%;
+    -ms-flex: 0 0 33.25%;
+    flex: 0 0 33.25%;
+}
+
+.bx-media-desktop .bx-layout-column-thin .bx-base-unit-showcase-wrapper .bx-base-text-unit-showcase {
+   width:calc(100%);
+}
+
+.bx-media-desktop .bx-layout-column-half .bx-base-unit-showcase-wrapper .bx-base-text-unit-showcase,
+.bx-media-desktop .bx-layout-column-wide .bx-base-unit-showcase-wrapper .bx-base-text-unit-showcase {
+   width:calc(50%);
+}
+
+.bx-media-desktop #sys_search_results  .bx-base-unit-showcase-wrapper .bx-base-text-unit-showcase,
+.bx-media-desktop .bx-layout-column-fullwidth  .bx-base-unit-showcase-wrapper .bx-base-text-unit-showcase {
+   width:calc(33.3%);
+}
+
+
+    
 /* view page */
 .bx-base-text-entity-image img {
     max-width: 100%;

modules/boonex/albums/template/css/main.css

@@ -44,62 +44,63 @@
     object-fit: cover;
 }
 	
-@media (min-width:533px) and (max-width:720px) {
-        .bx-layout-column-half .bx-albums-medias-wrapper .bx-albums-media-wrapper,
-        .bx-layout-column-thin .bx-albums-medias-wrapper .bx-albums-media-wrapper {
-        -webkit-flex: 0 0 49.8%;
-        -ms-flex: 0 0 49.8%;
-        flex: 0 0 49.8%;
-    }
-}
-
-@media (min-width:533px) and (max-width:1024px) {
-	#sys_search_results .bx-albums-medias-wrapper .bx-albums-media-wrapper,
-	.bx-layout-column-wide .bx-albums-medias-wrapper .bx-albums-media-wrapper,
-	.bx-layout-column-fullwidth .bx-albums-medias-wrapper .bx-albums-media-wrapper {
-        -webkit-flex: 0 0 49.8%;
-        -ms-flex: 0 0 49.8%;
-        flex: 0 0 49.8%;
-    }
-
-    .bx-layout-column-wide .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size {
-        width: 100%;
-        height: auto;
-    }
-
-    #sys_search_results .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size,
-    .bx-layout-column-fullwidth .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size {
-        height: 18.0rem;
-    }
-    
+/* MEDIA: phone2 */
+
+.bx-media-phone2 .bx-layout-column-half .bx-albums-medias-wrapper .bx-albums-media-wrapper,
+.bx-media-phone2 .bx-layout-column-thin .bx-albums-medias-wrapper .bx-albums-media-wrapper {
+    -webkit-flex: 0 0 49.8%;
+    -ms-flex: 0 0 49.8%;
+    flex: 0 0 49.8%;
+}
+
+/* MEDIA: tablet2 */
+
+.bx-media-tablet2 #sys_search_results .bx-albums-medias-wrapper .bx-albums-media-wrapper,
+.bx-media-tablet2 .bx-layout-column-wide .bx-albums-medias-wrapper .bx-albums-media-wrapper,
+.bx-media-tablet2 .bx-layout-column-fullwidth .bx-albums-medias-wrapper .bx-albums-media-wrapper {
+    -webkit-flex: 0 0 49.8%;
+    -ms-flex: 0 0 49.8%;
+    flex: 0 0 49.8%;
+}
+
+.bx-media-tablet2 .bx-layout-column-wide .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size {
+    width: 100%;
+    height: auto;
+}
+
+.bx-media-tablet2 #sys_search_results .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size,
+.bx-media-tablet2 .bx-layout-column-fullwidth .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size {
+    height: 18.0rem;
 }
 
-@media (min-width:1024px) {
-    .bx-layout-column-wide .bx-albums-medias-wrapper .bx-albums-media-wrapper {
-        -webkit-flex: 0 0 49.8%;
-        -ms-flex: 0 0 49.8%;
-        flex: 0 0 49.8%;
-    }
-
-    .bx-layout-column-wide .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size {
-        width: 100%;
-        height: auto;
-    }
-		
-    #sys_search_results .bx-albums-medias-wrapper .bx-albums-media-wrapper,
-    .bx-layout-column-fullwidth .bx-albums-medias-wrapper .bx-albums-media-wrapper {
-        -webkit-flex: 0 0 33.25%;
-        -ms-flex: 0 0 33.25%;
-        flex: 0 0 33.25%;
-    }
+/* MEDIA: desktop */
+
+.bx-media-desktop .bx-layout-column-wide .bx-albums-medias-wrapper .bx-albums-media-wrapper {
+    -webkit-flex: 0 0 49.8%;
+    -ms-flex: 0 0 49.8%;
+    flex: 0 0 49.8%;
+}
+
+.bx-media-desktop .bx-layout-column-wide .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size {
+    width: 100%;
+    height: auto;
+}
     
-    #sys_search_results .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size,
-    .bx-layout-column-half .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size,
-    .bx-layout-column-fullwidth .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size {
-        height: 18.0rem;
-    }
+.bx-media-desktop #sys_search_results .bx-albums-medias-wrapper .bx-albums-media-wrapper,
+.bx-media-desktop .bx-layout-column-fullwidth .bx-albums-medias-wrapper .bx-albums-media-wrapper {
+    -webkit-flex: 0 0 33.25%;
+    -ms-flex: 0 0 33.25%;
+    flex: 0 0 33.25%;
+}
+
+.bx-media-desktop #sys_search_results .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size,
+.bx-media-desktop .bx-layout-column-half .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size,
+.bx-media-desktop .bx-layout-column-fullwidth .bx-albums-medias-wrapper .bx-albums-media-wrapper .bx-albums-unit-size {
+    height: 18.0rem;
 }
 
+    
+
 
 .bx-search-result-block .bx-base-text-unit-gallery-wrapper {
 	display: block;

modules/boonex/convos/template/css/main-media-desktop.css

@@ -1,12 +1,10 @@
-@media (min-width:1024px) {
 
-.bx-grid-table .bx-cnv-collaborator {
+.bx-media-desktop .bx-grid-table .bx-cnv-collaborator {
     display:inline;
     display:inline-block;
 }
 
-.bx-grid-table .bx-grid-header-collaborators span {
+.bx-media-desktop .bx-grid-table .bx-grid-header-collaborators span {
     display:inline;
 }
 
-} /* @media end */

modules/boonex/convos/template/css/main-media-tablet.css

@@ -1,12 +1,9 @@
-@media (min-width:720px) and (max-width:1024px) {
 
-.bx-grid-table .bx-cnv-collaborator {
+.bx-media-tablet .bx-grid-table .bx-cnv-collaborator {
     display:inline;
     display:inline-block;
 }
 
-.bx-grid-table .bx-grid-header-collaborators span {
+.bx-media-tablet .bx-grid-table .bx-grid-header-collaborators span {
     display:inline;
 }
-
-} /* @media end */

modules/boonex/decorous/data/template/system/css/default.less

@@ -1,15 +1,13 @@
 @import '../../../../../../../template/css/default.less';
 
 /* viewport */
-@media (min-width:720px) and (max-width:1024px) {
-	html {
-	    font-size: @bx-viewport-font-tablet !important;
-	}
-}
-@media (max-width:720px) {
-	html {
-	    font-size: @bx-viewport-font-mobile !important;
-	}
+
+html.bx-media-tablet {
+    font-size: @bx-viewport-font-tablet !important;
+}
+
+html.bx-media-phone {
+    font-size: @bx-viewport-font-mobile !important;
 }
 
 /* height */

modules/boonex/decorous/data/template/system/css/media-phone.css

@@ -1,7 +1,6 @@
 @import url(../../../../../../../template/css/media-phone.css);
 
-@media (max-width:720px) {
-	#bx-logo-container {
-        text-align: center;
-    }
-}
+.bx-media-phone #bx-logo-container {
+    text-align: center;
+}
+

modules/boonex/forum/template/css/main-media-desktop.css

@@ -1,5 +1,5 @@
-@media (min-width:1024px) {
-	.bx-grid-header-participants span {
-	    display:inline;
-	}
-} /* @media end */
+
+.bx-media-desktop .bx-grid-header-participants span {
+	display:inline;
+}
+

modules/boonex/forum/template/css/main-media-tablet.css

@@ -1,5 +1,5 @@
-@media (min-width:720px) and (max-width:1024px) {
-	.bx-grid-header-participants span {
-	    display:inline;
-	}
-} /* @media end */
+
+.bx-media-tablet .bx-grid-header-participants span {
+	display:inline;
+}
+

modules/boonex/protean/data/template/system/css/default.less

@@ -1,15 +1,12 @@
 @import '../../../../../../../template/css/default.less';
 
 /* viewport */
-@media (min-width:720px) and (max-width:1024px) {
-	html {
-	    font-size: @bx-viewport-font-tablet !important;
-	}
-}
-@media (max-width:720px) {
-	html {
-	    font-size: @bx-viewport-font-mobile !important;
-	}
+html.bx-media-tablet {
+    font-size: @bx-viewport-font-tablet !important;
+}
+
+html.bx-media-phone {
+    font-size: @bx-viewport-font-mobile !important;
 }
 
 /* height */

modules/boonex/timeline/template/css/view-media-desktop.css

@@ -1,83 +1,82 @@
-@media (min-width: 1024px) {
-	/*--- View Block Style ---*/
-	.bx-tl-grid-sizer {
-		width: 33.3%;
-	}
-    .bx-layout-column-wide .bx-tl-grid-sizer,
-    .bx-layout-column-half .bx-tl-grid-sizer {
-       width: 50%;
-    }
-    .bx-layout-column-thin .bx-tl-grid-sizer {
-       width: 100%;
-    }
-
-    .bx-tl-grid-item-sizer {
-       width: 33.3%;
-    }
-    .bx-layout-column-wide .bx-tl-grid-item-sizer,
-    .bx-layout-column-half .bx-tl-grid-item-sizer {
-        width: 50%;
-    }
-    .bx-layout-column-thin .bx-tl-item-grid-sizer {
-        width: 100%;
-    }
-
-	/*--- Timeline Item Style ---*/
-	div.bx-tl-view-timeline div.bx-tl-item-cnt {
-	    position: relative;
-	
-	    margin: 0px 0px 0px 56px;
-	    margin: 0px 0px 0px 3.5rem;
-	}
-	.bx-layout-column-fullwidth div.bx-tl-view-timeline div.bx-tl-items::before {
-        left: 50%;
-        margin-left: -2px;
-        margin-left: -0.125rem;
-	} 
-	.bx-layout-column-fullwidth div.bx-tl-view-timeline div.bx-tl-item div.bx-tl-item-type {
-        left: 50%;
-        margin-left: -20px;
-        margin-left: -1.25rem;
-	} 
-	.bx-layout-column-fullwidth div.bx-tl-view-timeline div.bx-tl-item div.bx-tl-item-cnt {
-        width: 45%;
-	}
-    .bx-layout-column-fullwidth div.bx-tl-view-timeline div.bx-tl-item:nth-child(2n + 1) div.bx-tl-item-cnt {
-        margin: 0px 56px 0px 0p;
-        margin: 0px 3.5rem 0px 0px;
-    }
-	.bx-layout-column-fullwidth div.bx-tl-view-timeline div.bx-tl-item:nth-child(2n) div.bx-tl-item-cnt {
-		float: right;
-
-        margin: 0px 0px 0px 56px;
-        margin: 0px 0px 0px 3.5rem;
-	}
-
-	/*--- Animation ---*/
-	.cssanimations div.bx-tl-view-timeline .bx-tl-item-type.is-hidden {
-	    visibility: hidden;
-	}
-	.cssanimations div.bx-tl-view-timeline .bx-tl-item-type.bounce-in {
-		visibility: visible;
-		-webkit-animation: cd-bounce-1 0.6s;
-		-moz-animation: cd-bounce-1 0.6s;
-		animation: cd-bounce-1 0.6s;
-	}
-	.cssanimations div.bx-tl-view-timeline .bx-tl-item-cnt.is-hidden {
-	    visibility: hidden;
-	}
-	.cssanimations div.bx-tl-view-timeline .bx-tl-item-cnt.bounce-in {
-		visibility: visible;
-		-webkit-animation: cd-bounce-2 0.6s;
-		-moz-animation: cd-bounce-2 0.6s;
-		animation: cd-bounce-2 0.6s;
-	}
-	/* inverse bounce effect on even content blocks */
-	.cssanimations .bx-layout-column-fullwidth div.bx-tl-view-timeline .bx-tl-item:nth-child(even) .bx-tl-item-cnt.bounce-in {
-		-webkit-animation: cd-bounce-2-inverse 0.6s;
-		-moz-animation: cd-bounce-2-inverse 0.6s;
-		animation: cd-bounce-2-inverse 0.6s;
-	}
+
+/*--- View Block Style ---*/
+.bx-media-desktop .bx-tl-grid-sizer {
+    width: 33.3%;
+}
+.bx-media-desktop .bx-layout-column-wide .bx-tl-grid-sizer,
+.bx-media-desktop .bx-layout-column-half .bx-tl-grid-sizer {
+   width: 50%;
+}
+.bx-media-desktop .bx-layout-column-thin .bx-tl-grid-sizer {
+   width: 100%;
+}
+
+.bx-media-desktop .bx-tl-grid-item-sizer {
+   width: 33.3%;
+}
+.bx-media-desktop .bx-layout-column-wide .bx-tl-grid-item-sizer,
+.bx-media-desktop .bx-layout-column-half .bx-tl-grid-item-sizer {
+    width: 50%;
+}
+.bx-media-desktop .bx-layout-column-thin .bx-tl-item-grid-sizer {
+    width: 100%;
+}
+
+/*--- Timeline Item Style ---*/
+.bx-media-desktop div.bx-tl-view-timeline div.bx-tl-item-cnt {
+    position: relative;
+
+    margin: 0px 0px 0px 56px;
+    margin: 0px 0px 0px 3.5rem;
+}
+.bx-media-desktop .bx-layout-column-fullwidth div.bx-tl-view-timeline div.bx-tl-items::before {
+    left: 50%;
+    margin-left: -2px;
+    margin-left: -0.125rem;
+} 
+.bx-media-desktop .bx-layout-column-fullwidth div.bx-tl-view-timeline div.bx-tl-item div.bx-tl-item-type {
+    left: 50%;
+    margin-left: -20px;
+    margin-left: -1.25rem;
+} 
+.bx-media-desktop .bx-layout-column-fullwidth div.bx-tl-view-timeline div.bx-tl-item div.bx-tl-item-cnt {
+    width: 45%;
+}
+.bx-media-desktop .bx-layout-column-fullwidth div.bx-tl-view-timeline div.bx-tl-item:nth-child(2n + 1) div.bx-tl-item-cnt {
+    margin: 0px 56px 0px 0p;
+    margin: 0px 3.5rem 0px 0px;
+}
+.bx-media-desktop .bx-layout-column-fullwidth div.bx-tl-view-timeline div.bx-tl-item:nth-child(2n) div.bx-tl-item-cnt {
+    float: right;
+
+    margin: 0px 0px 0px 56px;
+    margin: 0px 0px 0px 3.5rem;
+}
+
+/*--- Animation ---*/
+.bx-media-desktop.cssanimations div.bx-tl-view-timeline .bx-tl-item-type.is-hidden {
+    visibility: hidden;
+}
+.bx-media-desktop.cssanimations div.bx-tl-view-timeline .bx-tl-item-type.bounce-in {
+    visibility: visible;
+    -webkit-animation: cd-bounce-1 0.6s;
+    -moz-animation: cd-bounce-1 0.6s;
+    animation: cd-bounce-1 0.6s;
+}
+.bx-media-desktop.cssanimations div.bx-tl-view-timeline .bx-tl-item-cnt.is-hidden {
+    visibility: hidden;
+}
+.bx-media-desktop.cssanimations div.bx-tl-view-timeline .bx-tl-item-cnt.bounce-in {
+    visibility: visible;
+    -webkit-animation: cd-bounce-2 0.6s;
+    -moz-animation: cd-bounce-2 0.6s;
+    animation: cd-bounce-2 0.6s;
+}
+/* inverse bounce effect on even content blocks */
+.bx-media-desktop.cssanimations .bx-layout-column-fullwidth div.bx-tl-view-timeline .bx-tl-item:nth-child(even) .bx-tl-item-cnt.bounce-in {
+    -webkit-animation: cd-bounce-2-inverse 0.6s;
+    -moz-animation: cd-bounce-2-inverse 0.6s;
+    animation: cd-bounce-2-inverse 0.6s;
 }
 
 /*--- Animation ---*/

modules/boonex/timeline/template/css/view-media-tablet.css

@@ -1,27 +1,25 @@
-@media (min-width:720px) and (max-width:1024px) {
-	/*--- View Block Style ---*/
-	.bx-tl-grid-sizer { 
-		width: 50%;
-	}
-    .bx-layout-column-half .bx-tl-grid-sizer, 
-    .bx-layout-column-thin .bx-tl-grid-sizer {
-        width: 100%;
-    }
 
-    .bx-tl-grid-item-sizer { 
-        width: 50%;
-    }
-    .bx-layout-column-half .bx-tl-grid-item-sizer, 
-    .bx-layout-column-thin .bx-tl-grid-item-sizer {
-        width: 100%;
-    }
+/*--- View Block Style ---*/
+.bx-media-tablet .bx-tl-grid-sizer { 
+    width: 50%;
+}
+.bx-media-tablet .bx-layout-column-half .bx-tl-grid-sizer, 
+.bx-media-tablet .bx-layout-column-thin .bx-tl-grid-sizer {
+    width: 100%;
+}
 
-    /*--- Timeline Item Style ---*/
-    div.bx-tl-view-timeline div.bx-tl-item-cnt {
-        position: relative;
-    
-        margin: 0px 0px 0px 56px;
-        margin: 0px 0px 0px 3.5rem;
-    }
-    
-}
+.bx-media-tablet .bx-tl-grid-item-sizer { 
+    width: 50%;
+}
+.bx-media-tablet .bx-layout-column-half .bx-tl-grid-item-sizer, 
+.bx-media-tablet .bx-layout-column-thin .bx-tl-grid-item-sizer {
+    width: 100%;
+}
+
+/*--- Timeline Item Style ---*/
+.bx-media-tablet div.bx-tl-view-timeline div.bx-tl-item-cnt {
+    position: relative;
+
+    margin: 0px 0px 0px 56px;
+    margin: 0px 0px 0px 3.5rem;
+}

studio/template/css/page-media-desktop.css

@@ -1,16 +1,15 @@
-@media (min-width: 1024px) {
-	div.bx-std-blocks-line.bx-std-bl-2-per-line .bx-std-block-wrp {
-	    width: 49.9%;
-		margin-top: 0px;
-	}
 
-	div.bx-std-blocks-line.bx-std-bl-3-per-line .bx-std-block-wrp {
-	    width: 33.3%;
-		margin-top: 0px;
-	}
+.bx-media-desktop div.bx-std-blocks-line.bx-std-bl-2-per-line .bx-std-block-wrp {
+    width: 49.9%;
+    margin-top: 0px;
+}
 
-	div.bx-std-blocks-line.bx-std-bl-4-per-line .bx-std-block-wrp {
-	    width: 24.9%;
-		margin-top: 0px;
-	}
-}
+.bx-media-desktop div.bx-std-blocks-line.bx-std-bl-3-per-line .bx-std-block-wrp {
+    width: 33.3%;
+    margin-top: 0px;
+}
+
+.bx-media-desktop div.bx-std-blocks-line.bx-std-bl-4-per-line .bx-std-block-wrp {
+    width: 24.9%;
+    margin-top: 0px;
+}

studio/template/css/page-media-tablet.css

@@ -1,8 +1,7 @@
-@media (min-width:720px) and (max-width:1024px) {
-	div.bx-std-blocks-line.bx-std-bl-2-per-line .bx-std-block-wrp,
-	div.bx-std-blocks-line.bx-std-bl-3-per-line .bx-std-block-wrp,
-	div.bx-std-blocks-line.bx-std-bl-4-per-line .bx-std-block-wrp {
-	    width: 49.9%;
-		margin-top: 0px;
-	}
-}
+
+.bx-media-tablet div.bx-std-blocks-line.bx-std-bl-2-per-line .bx-std-block-wrp,
+.bx-media-tablet div.bx-std-blocks-line.bx-std-bl-3-per-line .bx-std-block-wrp,
+.bx-media-tablet div.bx-std-blocks-line.bx-std-bl-4-per-line .bx-std-block-wrp {
+    width: 49.9%;
+    margin-top: 0px;
+}

studio/template/css/store-media-desktop.css

@@ -1,5 +1,4 @@
-@media (min-width: 1024px) {
-	div.bx-std-product {
-		width: 33.3%;
-	}
-}
+
+.bx-media-desktop div.bx-std-product {
+	width: 33.3%;
+}

studio/template/css/store-media-tablet.css

@@ -1,5 +1,4 @@
-@media (min-width:720px) and (max-width:1024px) {
-	div.bx-std-product { 
-		width: 50%;
-	}
-}
+
+.bx-media-tablet div.bx-std-product { 
+	width: 50%;
+}

studio/template/css/store.css

@@ -381,4 +381,4 @@ div.bx-std-pvs-item {
     .bx-std-categories .bx-std-category {
        width: 33%;
     }
-}
+}

template/_header_js.html

@@ -12,4 +12,46 @@
         $.cookie('devicePixelRatio', dpr, {expires: 365, path: '/'});
         window.location.reload();
     })(window);
+
+    var oMediaPhone = window.matchMedia('(max-width:720px)');
+    var oMediaPhone2 = window.matchMedia('(min-width:533px) and (max-width:720px)');
+    var oMediaTablet = window.matchMedia('(min-width:720px) and (max-width:1024px)');
+    var oMediaTablet2 = window.matchMedia('(min-width:533px) and (max-width:1024px)');
+    var oMediaDesktop = window.matchMedia('(min-width:1024px)'); 
+
+    function fMediaCallback(e) {
+        if (oMediaPhone.matches)
+            $('html').addClass('bx-media-phone');
+        else
+            $('html').removeClass('bx-media-phone');
+        
+        if (oMediaPhone2.matches)
+            $('html').addClass('bx-media-phone2');
+        else
+            $('html').removeClass('bx-media-phone2');
+        
+        if (oMediaTablet.matches)
+            $('html').addClass('bx-media-tablet');
+        else
+            $('html').removeClass('bx-media-tablet');
+        
+        if (oMediaTablet2.matches)
+            $('html').addClass('bx-media-tablet2');
+        else
+            $('html').removeClass('bx-media-tablet2');
+
+        if (oMediaDesktop.matches)
+            $('html').addClass('bx-media-desktop');
+        else
+            $('html').removeClass('bx-media-desktop');
+    }
+
+    oMediaPhone.addListener(fMediaCallback);
+    oMediaPhone2.addListener(fMediaCallback);
+    oMediaTablet.addListener(fMediaCallback);
+    oMediaTablet2.addListener(fMediaCallback);
+    oMediaDesktop.addListener(fMediaCallback);
+
+    fMediaCallback(null);
+
 </script>

template/css/general.css

@@ -325,14 +325,3 @@
 	right: 1.25rem;
 	bottom: 1.25rem;
 }
-
-
-/*--- Phone ---*/
-@media (max-width:720px) {
-    /*--- Post Form ---*/
-    .sys-cpf-submenu .sys-cpf-submenu-item > div {
-        display: block;
-        text-align: center;
-    }
-}
-

template/css/media-desktop.css

@@ -1,23 +1,22 @@
-@media (min-width:1024px) {
 
-html {
+html.bx-media-desktop {
     font-size:100%;
 }
 
-.bx-def-media-desktop-hide {
+.bx-media-desktop .bx-def-media-desktop-hide {
     display:none !important;
 }
-.bx-def-media-desktop-show-block {
+.bx-media-desktop .bx-def-media-desktop-show-block {
     display:block;
 }
 
 
-.bx-def-constraint-all *,
-.bx-def-constraint-list ol, .bx-def-constraint-list ul,
-.bx-def-constraint-pre pre,
-.bx-def-constraint-object object,
-.bx-def-constraint-iframe iframe,
-.bx-def-constraint-img img {
+.bx-media-desktop .bx-def-constraint-all *,
+.bx-media-desktop .bx-def-constraint-list ol, .bx-def-constraint-list ul,
+.bx-media-desktop .bx-def-constraint-pre pre,
+.bx-media-desktop .bx-def-constraint-object object,
+.bx-media-desktop .bx-def-constraint-iframe iframe,
+.bx-media-desktop .bx-def-constraint-img img {
     -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -26,12 +25,10 @@ html {
     max-width:900px !important;
     overflow:hidden !important;
 }
-.bx-def-constraint-pre pre {
+.bx-media-desktop .bx-def-constraint-pre pre {
     overflow:scroll !important;
 }
-.bx-def-constraint-img img  {
+.bx-media-desktop .bx-def-constraint-img img  {
     max-width:100% !important;
     height: auto !important;
 }
-
-} /* @media end */

template/css/media-phone.css

@@ -1,23 +1,22 @@
-@media (max-width:720px) {
 
-html {
+html.bx-media-phone {
     font-size:85%;
 }
 
-.bx-def-media-phone-hide {
+.bx-media-phone .bx-def-media-phone-hide {
     display:none !important;
 }
-.bx-def-media-phone-show-block {
+.bx-media-phone .bx-def-media-phone-show-block {
     display:block;
 }
 
 
-.bx-def-constraint-all *,
-.bx-def-constraint-list ol, .bx-def-constraint-list ul,
-.bx-def-constraint-pre pre,
-.bx-def-constraint-object object,
-.bx-def-constraint-iframe iframe,
-.bx-def-constraint-img img {
+.bx-media-phone .bx-def-constraint-all *,
+.bx-media-phone .bx-def-constraint-list ol, .bx-def-constraint-list ul,
+.bx-media-phone .bx-def-constraint-pre pre,
+.bx-media-phone .bx-def-constraint-object object,
+.bx-media-phone .bx-def-constraint-iframe iframe,
+.bx-media-phone .bx-def-constraint-img img {
     -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -26,44 +25,44 @@ html {
     max-width:100% !important;
     overflow:hidden !important;
 }
-.bx-def-constraint-img img {
+.bx-media-phone .bx-def-constraint-img img {
     height:auto !important;
 }
-.bx-def-constraint-pre pre {
+.bx-media-phone .bx-def-constraint-pre pre {
     overflow:scroll !important;
 }
 
 
 /* default.css */ 
 
-.bx-def-page-width {
+.bx-media-phone .bx-def-page-width {
     width:auto;
 }
 
-.bx-page-wrapper.bx-def-padding-sec-leftright {
+.bx-media-phone .bx-page-wrapper.bx-def-padding-sec-leftright {
 	padding-left: 0px;
 	padding-right: 0px;
 }
 
-#bx-content-container.bx-def-padding-sec-left {
+.bx-media-phone #bx-content-container.bx-def-padding-sec-left {
 	padding-left: 0px;
 }
 
-#bx-content-container.bx-def-padding-sec-right {
+.bx-media-phone #bx-content-container.bx-def-padding-sec-right {
 	padding-right: 0px;
 }
 
-#bx-content-container .bx-db-container.bx-def-border-block {
+.bx-media-phone #bx-content-container .bx-db-container.bx-def-border-block {
 	border-left-width: 0px;
 	border-right-width: 0px;
 }
 
 /* general.css */
 
-#bx-logo-container {
+.bx-media-phone #bx-logo-container {
     margin:0 3rem;
 }
-#bx-footer-wrapper {
+.bx-media-phone #bx-footer-wrapper {
 	height: auto;
 }
 
@@ -71,10 +70,10 @@ html {
 
 /* make popup fullscreen */
 
-.bx-popup-responsive.bx-popup-trans-wrapper:not(.bx-popup-image-wrapper),
-.bx-popup-responsive:not(.bx-popup-image-wrapper) .bx-popup-trans,
-.bx-popup-responsive:not(.bx-popup-image-wrapper).bx-popup-applied,
-.bx-popup-responsive .bx-popup-box {
+.bx-media-phone .bx-popup-responsive.bx-popup-trans-wrapper:not(.bx-popup-image-wrapper),
+.bx-media-phone .bx-popup-responsive:not(.bx-popup-image-wrapper) .bx-popup-trans,
+.bx-media-phone .bx-popup-responsive:not(.bx-popup-image-wrapper).bx-popup-applied,
+.bx-media-phone .bx-popup-responsive .bx-popup-box {
     position:fixed !important;
     top:0 !important;
     left:0 !important;
@@ -87,76 +86,81 @@ html {
     overflow:auto;
 }
 
-.bx-popup-responsive .bx-popup-trans > div,
-.bx-popup-responsive .bx-popup-box > div {
+.bx-media-phone .bx-popup-responsive .bx-popup-trans > div,
+.bx-media-phone .bx-popup-responsive .bx-popup-box > div {
 	border-radius:0;
 	-moz-border-radius:0;
 	-webkit-border-radius:0;
 }
 
-.bx-popup-responsive.bx-popup-image-wrapper:not(.foo) .bx-popup-border,
-.bx-popup-responsive.bx-popup-trans-wrapper:not(.foo) .bx-popup-border,
-.bx-popup-responsive.bx-popup-box-wrapper:not(.foo) .bx-popup-border {
+.bx-media-phone .bx-popup-responsive.bx-popup-image-wrapper:not(.foo) .bx-popup-border,
+.bx-media-phone .bx-popup-responsive.bx-popup-trans-wrapper:not(.foo) .bx-popup-border,
+.bx-media-phone .bx-popup-responsive.bx-popup-box-wrapper:not(.foo) .bx-popup-border {
     border:none;
 }
 
-.bx-popup-responsive.bx-popup-image-wrapper .bx-popup,
-.bx-popup-responsive.bx-popup-trans-wrapper .bx-popup,
-.bx-popup-responsive.bx-popup-box-wrapper .bx-popup {
+.bx-media-phone .bx-popup-responsive.bx-popup-image-wrapper .bx-popup,
+.bx-media-phone .bx-popup-responsive.bx-popup-trans-wrapper .bx-popup,
+.bx-media-phone .bx-popup-responsive.bx-popup-box-wrapper .bx-popup {
 	-moz-box-shadow:none;
 	-webkit-box-shadow:none;
     box-shadow:none;
 }
 
-.bx-popup-width {
+.bx-media-phone .bx-popup-width {
     width:100%;
 }
 
 /* page layouts */
 
-.bx-layout-col {
+.bx-media-phone .bx-layout-col {
     float:none !important;
     width:auto !important;
 }
 
-.bx-layout-cell {
+.bx-media-phone .bx-layout-cell {
     padding:0 !important;
 }
 
 /* menu.css */
 
-ul.bx-menu-toolbar li a span.bx-menu-toolbar-item-title,
-#bx-menu-toolbar-2-container ul.bx-menu-toolbar li a span.bx-menu-toolbar-item-title {
+.bx-media-phone ul.bx-menu-toolbar li a span.bx-menu-toolbar-item-title,
+.bx-media-phone #bx-menu-toolbar-2-container ul.bx-menu-toolbar li a span.bx-menu-toolbar-item-title {
     display:none;
 }
 
 /* loading indicator */
-.bx-btn .bx-loading-ajax-btn {
+.bx-media-phone .bx-btn .bx-loading-ajax-btn {
 	margin-top: 2px;
 	margin-bottom: 2px;
 }
-.bx-btn.bx-btn-small .bx-loading-ajax-btn {
+.bx-media-phone .bx-btn.bx-btn-small .bx-loading-ajax-btn {
     margin-top: 0px;
     margin-bottom: 0px;
 }
 
 /* grid.css */
 
-html .bx-grid-table-wrapper {
+html.bx-media-phone .bx-grid-table-wrapper {
     overflow-x:scroll;
 }
-html .bx-grid-table {
+html.bx-media-phone .bx-grid-table {
     min-width:720px;
 }
-html .bx-grid-table-wrapper2:before,
-html .bx-grid-table-wrapper2:after {
+html.bx-media-phone .bx-grid-table-wrapper2:before,
+html.bx-media-phone .bx-grid-table-wrapper2:after {
     display:block;
 }
 
 
 /* score.css */
-div.bx-score-by-list div.bx-score-by-list-cnt {
+.bx-media-phone div.bx-score-by-list div.bx-score-by-list-cnt {
 	max-height: none;
 }
 
-} /* @media end */
+/* general.css Post Form */
+.bx-media-phone .sys-cpf-submenu .sys-cpf-submenu-item > div {
+    display: block;
+    text-align: center;
+}
+

template/css/media-tablet.css

@@ -1,23 +1,22 @@
-@media (min-width:720px) and (max-width:1024px) {
 
-html {
+html.bx-media-tablet {
     font-size:100%;
 }
 
-.bx-def-media-tablet-hide {
+.bx-media-tablet .bx-def-media-tablet-hide {
     display:none !important;
 }
-.bx-def-media-tablet-show-block {
+.bx-media-tablet .bx-def-media-tablet-show-block {
     display:block;
 }
 
 
-.bx-def-constraint-all *,
-.bx-def-constraint-list ol, .bx-def-constraint-list ul,
-.bx-def-constraint-pre pre,
-.bx-def-constraint-object object,
-.bx-def-constraint-iframe iframe,
-.bx-def-constraint-img img {
+.bx-media-tablet .bx-def-constraint-all *,
+.bx-media-tablet .bx-def-constraint-list ol, .bx-def-constraint-list ul,
+.bx-media-tablet .bx-def-constraint-pre pre,
+.bx-media-tablet .bx-def-constraint-object object,
+.bx-media-tablet .bx-def-constraint-iframe iframe,
+.bx-media-tablet .bx-def-constraint-img img {
     -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -26,26 +25,25 @@ html {
     max-width:500px !important;
     overflow:hidden !important;
 }
-.bx-def-constraint-pre pre {
+.bx-media-tablet .bx-def-constraint-pre pre {
     overflow:scroll !important;
 }
 
 
 /* default.css */
 
-.bx-def-page-width {
+.bx-media-tablet .bx-def-page-width {
     width:auto;
 }
 
 
 /* page layouts */
-.bx-layout-wrapper.bx-layout-top-area-bcb .bx-layout-col {
+.bx-media-tablet .bx-layout-wrapper.bx-layout-top-area-bcb .bx-layout-col {
     float:none !important;
     width:auto !important;
 }
-.bx-layout-wrapper.bx-layout-top-area-bcb .bx-layout-col .bx-layout-cell {
+.bx-media-tablet .bx-layout-wrapper.bx-layout-top-area-bcb .bx-layout-col .bx-layout-cell {
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 }
 
-} /* @media end */