rules css:

... */ @media (min-width: 1440px) { #rule_css:after { content: "more than big col-lg" } } @media (min-width: 1349px) { #rule_css:after { content: "more than col-lg 2" } } @media (min-width: 1300px) { #rule_css:after { content: "more than col-lg 1" } } /* col-lg */ /* Large devices (large desktops, 1200px and up) */ @media (min-width: 1280px) { #rule_css:after { content: " col-lg" } } /* col-md */ /* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) and (max-width: 1199px) { .main-slider .slide { /*position: relative;*/ /*padding: 100px 0px 100px;*/ /*margin-bottom: -200px;*/ height: 700px; } /*info*/ #rule_css:after { content: " col-md" } } /* col-sm */ /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) and (max-width: 991px) { .main-slider{ /*background: green;*/ height: 400px; } .main-slider .slide { /*position: relative;*/ padding: 0; margin-bottom: 0; height: 400px; } .main-slider .owl-dots { bottom: 50px !important; } .about.type_one { padding-top: 0; } .about.type_one .image_box { /*background: red;*/ } .about.type_one .image_box img { width: 100% !important; height: auto; margin-top: -100px; margin-bottom: -100px; } /*header*/ .header_v2 .header_top { display: block !important; } .header_v2 .header_top .col-lg-7, .header_v2 .header_top .col-lg-2 { display: none; } /*sidebar*/ .popular_posts .posts_box img { height: 90px !important; width: auto !important; } /*info*/ #rule_css:after { content: " col-sm" } } /* col-xs */ /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ @media (max-width: 768px) { .main-slider{ /*background: green;*/ } .main-slider .slide { /*background: yellow;*/ height: 500px; } .main-slider .owl-dots { bottom: 50px !important; } .about.type_one { /*background: blue;*/ } .about.type_one .image_box { /*background: red;*/ overflow: hidden; } .about.type_one .image_box img { /*background: pink;*/ width: 100%; margin-top: -50px; margin-bottom: -50px; } /*header*/ .header_v2 .header_top { display: block !important; } .header_v2 .header_top .col-lg-7, .header_v2 .header_top .col-lg-2 { display: none; } /*sidebar*/ .popular_posts .posts_box img { height: 90px !important; width: auto !important; } /*info*/ #rule_css:after { content: " col-xs" } } @media (max-width: 720px) { /*info*/ #rule_css:after { content: " col-xs1" } } /* col-xxs */ /* custom col extras small */ @media (max-width: 620px) { .main-slider{ /*background: green;*/ } .main-slider .slide { /*background: yellow;*/ height: 430px; } .main-slider .owl-dots { bottom: 30px !important; } .about.type_one { /*background: blue;*/ padding-top: 0; } .about.type_one.about-custom .col-lg-6:first-of-type { padding-left: 0; padding-right: 0; } .about.type_one .image_box { /*background: red;*/ overflow: hidden; } .about.type_one .image_box img { /*background: pink;*/ width: 99% !important; height: auto !important; margin-top: -80px; margin-bottom: -50px; } /*info*/ #rule_css:after { content: " col-xxs" } } /* col-xxxs */ /* custom col extras small */ @media (max-width: 414px) { /*info*/ #rule_css:after { content: " col-xxxs" } } /* col-xxxs */ /* custom col extras super small */ @media (max-width: 380px) { /*info*/ #rule_css:after { content: " col-xxxxs" } } @media (max-width: 320px) { /*info*/ #rule_css:after { content: " col-xxxxxs" } }