/* --------------------------------------------------- Boutique - Styles for Mobile Devices --------------------------------------------------- */ /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 1004px) and (max-width: 1110px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ .main-header { width: 980px; } header div.wrap { width: 980px; } .wrap { width: 980px; } .main-content { width: 650px; } .single-content, .page-content { width: 625px;} /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* -- Home blog posts -- */ ul.example-1 li { width: 300px; height: 430px; } ul.example-1 li img { width: 300px; height: 300px;} ul.example-1 li div.post-content { width: 270px;} ul.example-1 li div.post-likes { margin:-295px 0 0 10px;} /* -- Home blog Masonry -- */ #example-2 div.list { width: 300px;} #example-2 div.list img { width: 300px;} #example-2 div.post-content { width: 270px;} /*----------------------------------------------------------------------------- ----------------------------- 4 - Entry Content ------------------------------- -----------------------------------------------------------------------------*/ /* -- Single post types -- */ img.attachment-thumbnail-single-image { width: 625px; height: auto;} .single-gallery img { width: 156px; height: 156px;} iframe.single_iframe { width: 625px; height: 400px;} /* -- Entry bottom -- */ .entry-bottom { width: 625px; } /*----------------------------------------------------------------------------- ----------------------------- 7 - Comments Form ------------------------------- -----------------------------------------------------------------------------*/ ul.comment { width: 100%; } /* -- Comments -- */ .comments { width: 100%; } ul.comment li { float: left;} /*----------------------------------------------------------------------------- ----------------------------- 9 - Custom Pages -------------------------------- -----------------------------------------------------------------------------*/ /* -- Tag & Category Index -- */ #mcTagMap .holdleft, #sc_mcTagMap .holdleft { width: 188px !important; } /*----------------------------------------------------------------------------- ----------------------------- 10 - Footer ------------------------------------- -----------------------------------------------------------------------------*/ footer .wrap { width: 980px; } } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 760px) and (max-width: 1000px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ .main-header { width: 750px; } header div.wrap { width: 750px; } .wrap { width: 750px; } .main-content { width: 775px; margin-bottom: 30px; } .single-content, .page-content { width: 750px; margin-bottom: 30px; } /*----------------------------------------------------------------------------- ----------------------------- 2 - Header -------------------------------------- -----------------------------------------------------------------------------*/ /* -- Ads Header -- */ .header-ads-728 { display: none;} /* -- Ads Header -- */ .header-ads-468 { display: block;} /* -- Top Header Menu -- ##################### */ .jquerycssmenu { display: none;} .mobileMenu { display: inline-block; border-radius: 2px; float: left; margin: -45px 0 0 0; width:220px; height:30px; border: none; background: #FFF; color: #111; font-weight: 600; font-size: 13px; padding: 7px 9px; z-index:999; cursor:pointer; } .mobileMenu option { padding: 2px 9px;} /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* -- Home blog posts -- */ ul.example-1 li { width: 230px; height: 375px; } ul.example-1 li img { width: 230px; height: 230px;} ul.example-1 li div.post-content { width: 200px;} ul.example-1 li div.post-likes { margin:-225px 0 0 10px;} /* -- Home blog Masonry -- */ #example-2 div.list { width: 230px;} #example-2 div.list img { width: 230px;} #example-2 div.post-content { width: 200px;} /*----------------------------------------------------------------------------- ----------------------------- 4 - Entry Content ------------------------------- -----------------------------------------------------------------------------*/ /* -- Single post types -- */ img.attachment-thumbnail-single-image { width: 750px; height: auto;} .single-gallery img { width: 150px; height: 150px;} iframe.single_iframe { width: 750px; height: 400px;} /* -- Entry bottom -- */ .entry-bottom { width: 750px; } /*----------------------------------------------------------------------------- ----------------------------- 6 - Sidebar & Widgets --------------------------- -----------------------------------------------------------------------------*/ /* -- Sidebar -- */ .sidebar { width: 750px; height: auto; float: inherit; margin: 50px auto !important; } .sidebar .widget { margin-bottom: 40px; } /* -- Vieos -- */ .sidebar iframe.wi-video { width: 750px; height: 400px;} /*----------------------------------------------------------------------------- ----------------------------- 7 - Comments Form ------------------------------- -----------------------------------------------------------------------------*/ ul.comment { width: 100%; } /* -- Comments -- */ .comments { width: 100%; } ul.comment li { float: left;} /*----------------------------------------------------------------------------- ----------------------------- 9 - Custom Pages -------------------------------- -----------------------------------------------------------------------------*/ /* -- Tag & Category Index -- */ #mcTagMap .holdleft, #sc_mcTagMap .holdleft { width: 167px !important; } /*----------------------------------------------------------------------------- ----------------------------- 10 - Footer ------------------------------------- -----------------------------------------------------------------------------*/ footer .wrap { width: 750px; } .sub-navigation-footer {display: none;} /* -- Copyright -- */ .copyright { width: 750px; } /* -- footer banner -- */ .footer-banner-970 { display: none;} .footer-banner-728 { display: block;} /* -- widgets posts -- */ footer .article_list li img { display: none;} footer .sub-article-widget { margin-left: 0px } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 760px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ .main-header { width: 450px; } header div.wrap { width: 450px; } .wrap { width: 450px; } .main-content { width: 475px; margin-bottom: 30px; } .single-content, .page-content { width: 450px; margin-bottom: 30px; } /*----------------------------------------------------------------------------- ----------------------------- 2 - Header -------------------------------------- -----------------------------------------------------------------------------*/ /* -- Logo -- */ .logo { display: block; float: none; margin-left: auto; margin-right: auto; } /* -- Ads Header -- */ .header-ads-728 { display: none;} /* -- Ads Header -- */ .header-ads-468 { display: block; margin: 15px -10px 15px 0;} /* -- Popular Words -- */ .popular-words { display: none;} /* -- Search -- */ #searchform2 { width: 450px; } #searchform2 #s { width: 370px;} /* -- Live Search -- */ ul.dwls_search_results { width: 410px !important; } ul.search_results li.post_with_thumb a { width: 280px !important;} /* -- Top Header Menu -- ##################### */ .jquerycssmenu { display: none;} .mobileMenu { display: inline-block; border-radius: 2px; float: left; margin: -45px 0 0 0; width:180px; height:30px; border: none; background: #FFF; color: #111; font-weight: 600; font-size: 13px; padding: 7px 9px; z-index:999; cursor:pointer; } .mobileMenu option { padding: 2px 9px;} /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* -- Home blog posts -- */ ul.example-1 li { width: 212px; height: 375px; } ul.example-1 li img { width: 212px; height: 212px;} ul.example-1 li div.post-content { width: 180px;} ul.example-1 li div.post-likes { margin:-207px 0 0 10px;} /* -- Home blog Masonry -- */ #example-2 div.list { width: 212px;} #example-2 div.list img { width: 212px;} #example-2 div.post-content { width: 180px;} /*----------------------------------------------------------------------------- ----------------------------- 4 - Entry Content ------------------------------- -----------------------------------------------------------------------------*/ /* -- Single post types -- */ img.attachment-thumbnail-single-image { width: 450px; height: auto;} .single-gallery img { width: 150px; height: 150px;} iframe.single_iframe { width: 450px; height: 300px;} /* -- Entry bottom -- */ .entry-bottom { width: 450px; } /* -- Entry Banner -- */ .entry-banner { width: 300px; height: 250px; float: inherit; margin: 20px auto; } /*----------------------------------------------------------------------------- ----------------------------- 6 - Sidebar & Widgets --------------------------- -----------------------------------------------------------------------------*/ /* -- Sidebar -- */ .sidebar { width: 450px; height: auto; float: inherit; margin: 50px auto !important; } .sidebar .widget { margin-bottom: 40px; } /* -- Vieos -- */ .sidebar iframe.wi-video { width: 450px; height: 300px;} /*----------------------------------------------------------------------------- ----------------------------- 7 - Comments Form ------------------------------- -----------------------------------------------------------------------------*/ ul.comment { width: 100%; } /* -- Comments -- */ .comments { width: 100%; } ul.comment li { float: left;} /*----------------------------------------------------------------------------- ----------------------------- 9 - Custom Pages -------------------------------- -----------------------------------------------------------------------------*/ /* -- Tag & Category Index -- */ #mcTagMap .holdleft, #sc_mcTagMap .holdleft { width: 205px !important; } /*----------------------------------------------------------------------------- ----------------------------- 10 - Footer ------------------------------------- -----------------------------------------------------------------------------*/ footer .wrap { width: 450px; } .sub-navigation-footer {display: none;} /* -- Copyright -- */ .copyright { width: 450px; } /* -- footer banner -- */ .footer-banner-970 { display: none;} .footer-banner-728 { display: none;} .footer-banner-468 { display: block;} /* -- Columns -- */ .one_third, .one_third_last { float:left; width:100%; margin-bottom:10px; margin-right:0; } .one_third_last { margin-right:0;} .one_fourth, .one_fourth_last { float:left; width:100%; margin-bottom:10px; margin-right:0; } .one_fourth_last { margin-right:0;} } /* All Mobile Size (devices) */ @media only screen and (max-width: 479px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ .main-header { width: 300px; } header div.wrap { width: 300px; } .wrap { width: 300px; } .main-content { width: 325px; margin-bottom: 30px; } .single-content, .page-content { width: 300px; margin-bottom: 30px; } /*----------------------------------------------------------------------------- ----------------------------- 2 - Header -------------------------------------- -----------------------------------------------------------------------------*/ /* -- Logo -- */ .logo { display: block; float: none; margin-left: auto; margin-right: auto; padding-top: 20px; } /* -- Ads Header -- */ .header-ads-728 { display: none;} /* -- Ads Header -- */ .header-ads-468 { display: none;} /* -- Popular Words -- */ .popular-words { display: none;} /* -- Search -- */ #searchform2 { width: 300px; } #searchform2 #s { width: 220px;} /* -- Live Search -- */ ul.dwls_search_results { width: 300px !important; } ul.search_results li.post_with_thumb a { width: 185px !important;} /* -- Top Header Menu -- ##################### */ .jquerycssmenu { display: none;} .mobileMenu { display: inline-block; border-radius: 2px; float: left; margin: -45px 0 0 0; width:100px; height:30px; border: none; background: #FFF; color: #111; font-weight: 600; font-size: 13px; padding: 7px 9px; z-index:999; cursor:pointer; } .mobileMenu option { padding: 2px 9px;} /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* -- Home blog posts -- */ ul.example-1 li { width: 300px; height: 440px; } ul.example-1 li img { width: 300px; height: 300px;} ul.example-1 li div.post-content { width: 270px;} ul.example-1 li div.post-likes { margin:-295px 0 0 10px;} /* -- Home blog Masonry -- */ #example-2 div.list { width: 300px;} #example-2 div.list img { width: 300px;} #example-2 div.post-content { width: 270px;} /*----------------------------------------------------------------------------- ----------------------------- 4 - Entry Content ------------------------------- -----------------------------------------------------------------------------*/ /* -- Single post types -- */ img.attachment-thumbnail-single-image { width: 300px; height: auto;} .single-gallery img { width: 150px; height: 150px;} iframe.single_iframe { width: 300px; height: 200px;} /* -- Entry bottom -- */ .entry-bottom { width: 300px; } /* -- Entry Banner -- */ .entry-banner { width: 300px; height: 250px; float: inherit; margin: 20px auto; } img.alignleft, .alignleft img { width: 100% !important;} img.alignright, .alignright img { width: 100% !important;} img.aligncenter, .aligncenter img { width: 100% !important;} /* -- About author -- */ .author-meta { width: 100%; } .author-meta img.avatar { width: 40px; height: 40px; } .author-info { width: auto; height: auto; margin: 0px 0 -15px 50px; } .author-meta .entry { padding: 0 10px !important;} /*----------------------------------------------------------------------------- ----------------------------- 6 - Sidebar & Widgets --------------------------- -----------------------------------------------------------------------------*/ /* -- Sidebar -- */ .sidebar { width: 300px; height: auto; float: inherit; margin: 50px auto !important; } .sidebar .widget { margin-bottom: 40px; } /* -- Vieos -- */ .sidebar iframe.wi-video { width: 300px; height: 200px;} /*----------------------------------------------------------------------------- ----------------------------- 7 - Comments Form ------------------------------- -----------------------------------------------------------------------------*/ .comments .pagination { width: 90%; margin: 25px auto !important;} ul.comment { width: 90%; margin: 0 auto 50px auto; } /* -- Comments -- */ .comments { width: 90%; float: inherit; height: auto; margin: 20px auto 0 auto;} ul.comment li { float: left;} /*----------------------------------------------------------------------------- ----------------------------- 8 - Contact Form -------------------------------- -----------------------------------------------------------------------------*/ /* -- Contact Form -- */ #contactform #contactName, #contactform #emaill, #contactform #subject { width:94%; } #contactform #subject { width: 97%;} #contactform textarea { width: 97%; } /*----------------------------------------------------------------------------- ----------------------------- 9 - Custom Pages -------------------------------- -----------------------------------------------------------------------------*/ /* -- Tag & Category Index -- */ #mcTagMap .holdleft, #sc_mcTagMap .holdleft { width: 130px !important; } /*----------------------------------------------------------------------------- ----------------------------- 10 - Footer ------------------------------------- -----------------------------------------------------------------------------*/ footer .wrap { width: 300px; } footer .widget { margin-bottom: 40px;} .sub-navigation-footer {display: none;} /* -- Copyright -- */ .copyright { width: 300px; } /* -- footer banner -- */ .footer-banner-970 { display: none;} .footer-banner-728 { display: none;} .footer-banner-468 { display: none;} /* -- Columns -- */ .one_half, .one_half_last { float:left;width:100%; margin-bottom:10px; margin-right:0; } .one_half_last { margin-right:0;} .one_third, .one_third_last { float:left; width:100%; margin-bottom:10px; margin-right:0; } .one_third_last { margin-right:0;} .one_fourth, .one_fourth_last { float:left; width:100%; margin-bottom:10px; margin-right:0; } .one_fourth_last { margin-right:0;} }