/* --------------------------------------------------- Wine - Styles for Mobile Devices --------------------------------------------------- */ /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 1004px) and (max-width: 1170px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ .wrap { width: 960px; padding: 30px 10px; } .top-wrap { width: 980px; } .wrap-fullwidth { width: 980px !important; } .wrap-content { width: 955px !important; } .single-content, .page-content { width: 630px; height: auto; float: left; margin-top: 5px;} /*----------------------------------------------------------------------------- ----------------------------- 2 - Header -------------------------------------- -----------------------------------------------------------------------------*/ /* -- Logo -- */ .logo { margin-left: 0px;} /* Search */ #searchform2 #s { width: 120px;} /* -- Live Search -- */ ul.dwls_search_results { width: 192px !important; } ul.search_results li.post_with_thumb a { width: 95px !important;} /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* -- Home blog posts -- */ .masonry .item_an, .masonry .item_an2 { width: 293px; } .item_an.big, .item_an2.big { width: 606px; } /* -- Hover Image -- */ a.imgWrap { display: block; } /*---------------------------------------------------------------------------- ----------------------------- 4 - Entry Content ------------------------------- -----------------------------------------------------------------------------*/ /* -- Single post types -- */ img.attachment-thumbnail-single-image { width: 100%; height: auto;} .single-gallery img { width: 157px; height: 157px;} iframe.single_iframe { width: 100%; height: 400px;} /* -- Entry bottom -- */ .entry-bottom { width: 100%; } /*----------------------------------------------------------------------------- ----------------------------- 7 - Comments Form ------------------------------- -----------------------------------------------------------------------------*/ ul.comment { width: 100%; } /* -- Comments -- */ .comments { width: 100%; } ul.comment li { float: left;} /*----------------------------------------------------------------------------- ----------------------------- 8 - Custom Pages -------------------------------- -----------------------------------------------------------------------------*/ /* -- Tag & Category Index -- */ #mcTagMap .holdleft, #sc_mcTagMap .holdleft { width: 190px !important; } /*----------------------------------------------------------------------------- ----------------------------- 10 - Footer ------------------------------------- -----------------------------------------------------------------------------*/ .wrap-footer { width: 980px;} /* -- footer banner -- */ .footer-banner-970 { display: none;} .footer-banner-728 { display: block;} } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 760px) and (max-width: 1000px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ .wrap { width: 730px; padding: 30px 10px; } .top-wrap { width: 750px; } .wrap-fullwidth { width: 750px !important; } .wrap-content { width: 725px !important; } .single-content, .page-content { width: 730px; height: auto; float: left; margin-top: 5px;} #background { display: none;} /*----------------------------------------------------------------------------- ----------------------------- 2 - Header -------------------------------------- -----------------------------------------------------------------------------*/ /* -- Logo -- */ .logo { display: block; float: none; margin-left: auto; margin-right: auto; } /* -- Popular Words -- */ .popular-words { display: none;} /* -- Top social icons -- */ ul.top-social { float: left;} /* -- Ads Header -- */ .header-728 { float: left; margin-left: 10px;} /* -- Header with menu -- */ .firstmenu { display: none;} /* -- Live Search -- */ ul.dwls_search_results { width: 300px !important; } ul.search_results li.post_with_thumb a { width: 200px !important;} /* -- Top Header Menu -- ##################### */ .jquerycssmenu { display: none;} /* -- Sticky Header -- */ .sticky { display: none;} /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* -- Home blog posts -- */ .masonry .item_an, .masonry .item_an2 { width: 330px; } .item_an.big, .item_an2.big { width: 330px; } /* -- Hover Image -- */ a.imgWrap { display: block; } /* -- infinite scroll Pagination -- */ #infscr-loading img { display: none !important;} /*---------------------------------------------------------------------------- ----------------------------- 4 - Entry Content ------------------------------- -----------------------------------------------------------------------------*/ /* -- Single post types -- */ img.attachment-thumbnail-single-image { width: 100%; height: auto;} .single-gallery img { width: 146px; height: 146px;} iframe.single_iframe { width: 100%; height: 400px;} /* -- Entry bottom -- */ .entry-bottom { width: 100%; } /*----------------------------------------------------------------------------- ----------------------------- 5 - Sidebar & Widgets --------------------------- -----------------------------------------------------------------------------*/ /* -- Sidebar -- */ .sidebar-middle { display: none;} /* -- Sidebar single page -- */ .single .sidebar { width: 750px; float: left;} .single .sidebar .widget { width: 350px; float: left; margin: 0 25px 40px 0;} .single .sidebar .article_list li img, .single .article_list li .media-icon { display: none;} /* -- Siebar default page -- */ .page-template-template-default-php .sidebar { width: 750px; float: left;} .page-template-template-default-php .sidebar .widget { width: 350px; float: left; margin: 0 25px 40px 0;} .page-template-template-default-php .sidebar .article_list li img, .page-template-template-default-php .article_list li .media-icon { display: none;} /* -- Siebar contact page -- */ .page-template-template-contact-php .sidebar { width: 750px; float: left;} .page-template-template-contact-php .sidebar .widget { width: 350px; float: left; margin: 0 25px 40px 0;} .page-template-template-contact-php .sidebar .article_list li img, .page-template-template-contact-php .article_list li .media-icon { display: none;} /* -- FeedBurner -- */ #newsletter-form input.newsletter-btn { width: 100%; margin-left: 1px;} /*----------------------------------------------------------------------------- ----------------------------- 7 - Comments Form ------------------------------- -----------------------------------------------------------------------------*/ ul.comment { width: 100%; } /* -- Comments -- */ .comments { width: 100%; } ul.comment li { float: left;} /*----------------------------------------------------------------------------- ----------------------------- 8 - Custom Pages -------------------------------- -----------------------------------------------------------------------------*/ /* -- Tag & Category Index -- */ #mcTagMap .holdleft, #sc_mcTagMap .holdleft { width: 163px !important; } /*----------------------------------------------------------------------------- ----------------------------- 10 - Footer ------------------------------------- -----------------------------------------------------------------------------*/ .wrap-footer { width: 750px;} /* -- footer banner -- */ .footer-banner-970 { display: none;} .footer-banner-728 { display: block;} } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 580px) and (max-width: 760px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ .wrap { width: 550px; padding: 30px 10px; } .top-wrap { width: 570px; } .wrap-fullwidth { width: 570px !important; } .wrap-content { width: 545px !important; } .single-content, .page-content { width: 550px; height: auto; float: left; margin-top: 5px;} #background { display: none;} /*----------------------------------------------------------------------------- ----------------------------- 2 - Header -------------------------------------- -----------------------------------------------------------------------------*/ /* -- Logo -- */ .logo { display: block; float: none; margin-left: auto; margin-right: auto; } /* -- Ads Header -- */ .header-728 { display: none;} /* -- Ads Header -- */ .header-468 { display: block; float: left; margin-left: 50px;} /* -- Popular Words -- */ .popular-words { display: none;} /* -- Top social icons -- */ ul.top-social { float: left;} /* -- Header with menu -- */ .firstmenu { display: none;} /* -- Live Search -- */ ul.dwls_search_results { width: 300px !important; } ul.search_results li.post_with_thumb a { width: 200px !important;} /* -- Top Header Menu -- ##################### */ .jquerycssmenu { display: none;} /* -- Sticky Header -- */ .sticky { display: none;} /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* -- Home blog posts -- */ .masonry .item_an, .masonry .item_an2 { width: 240px; } .item_an.big, .item_an2.big { width: 240px; } /* -- Hover Image -- */ a.imgWrap { display: block; } /* -- infinite scroll Pagination -- */ #infscr-loading img { display: none !important;} /*---------------------------------------------------------------------------- ----------------------------- 4 - Entry Content ------------------------------- -----------------------------------------------------------------------------*/ h1.article-title { font-size: 30px; line-height: 36px; } h1.page-title { font-size: 30px; line-height: 36px; } /* -- Single post types -- */ img.attachment-thumbnail-single-image { width: 100%; height: auto;} .single-gallery img { width: 137px; height: 137px;} iframe.single_iframe { width: 100%; height: 300px;} /* -- Entry bottom -- */ .entry-bottom { width: 100%; } /*----------------------------------------------------------------------------- ----------------------------- 5 - Sidebar & Widgets --------------------------- -----------------------------------------------------------------------------*/ /* -- Sidebar -- */ .sidebar-middle { display: none;} /* -- Sidebar single page -- */ .sidebar { width: 550px; float: left;} .sidebar .widget { width: 550px; float: left; margin: 0 0 40px 0;} .sidebar .article_list li img, .sidebar .article_list li .media-icon { display: none;} /* -- FeedBurner -- */ #newsletter-form input.newsletter-btn { width: 100%; margin-left: 1px;} /*----------------------------------------------------------------------------- ----------------------------- 7 - Comments Form ------------------------------- -----------------------------------------------------------------------------*/ ul.comment { width: 100%; } /* -- Comments -- */ .comments { width: 100%; } ul.comment li { float: left;} /*----------------------------------------------------------------------------- ----------------------------- 8 - Contact Form -------------------------------- -----------------------------------------------------------------------------*/ /* -- Contact Form -- */ #contactform #contactName, #contactform #emaill, #contactform #subject { width:96%; } #contactform #subject { width: 98%;} #contactform textarea { width: 98%; } /*----------------------------------------------------------------------------- ----------------------------- 9 - Custom Pages -------------------------------- -----------------------------------------------------------------------------*/ /* -- Tag & Category Index -- */ #mcTagMap .holdleft, #sc_mcTagMap .holdleft { width: 163px !important; } /*----------------------------------------------------------------------------- ----------------------------- 10 - Footer ------------------------------------- -----------------------------------------------------------------------------*/ .wrap-footer { width: 570px;} /* -- footer banner -- */ .footer-banner-970 { display: none;} .footer-banner-728 { display: none;} .footer-banner-468 { display: block;} /* -- Copyright -- */ .copyright { width: 100%;} /* -- Footer Social Icons -- */ ul.footer-social li { margin: 27px 5px 0 5px; } ul.footer-social li a { text-align: center; padding: 5px 5px; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 580px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ .wrap { width: 440px; padding: 30px 10px; } .top-wrap { width: 460px; } .wrap-fullwidth { width: 460px !important; } .wrap-content { width: 460px !important; margin-left: -5px; } .single-content, .page-content { width: 440px; height: auto; float: left; margin-top: 5px;} #background { display: none;} /*----------------------------------------------------------------------------- ----------------------------- 2 - Header -------------------------------------- -----------------------------------------------------------------------------*/ /* -- Logo -- */ .logo { display: block; float: none; margin-left: auto; margin-right: auto; } /* -- Ads Header -- */ .header-728 { display: none;} /* -- Ads Header -- */ .header-468 { display: block; float: left; margin-left: -8px;} /* -- Popular Words -- */ .popular-words { display: none;} /* -- Top social icons -- */ ul.top-social { float: left;} /* -- Header with menu -- */ .firstmenu { display: none;} /* -- Live Search -- */ ul.dwls_search_results { width: 300px !important; } ul.search_results li.post_with_thumb a { width: 200px !important;} /* -- Top Header Menu -- ##################### */ .jquerycssmenu { display: none;} /* -- Sticky Header -- */ .sticky { display: none;} /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* -- Home blog posts -- */ .masonry .item_an, .masonry .item_an2 { width: 208px; } .item_an.big, .item_an2.big { width: 208px; } #articles .an-display-comm, #featured-articles .an-display-comm { float: left;} /* -- Hover Image -- */ a.imgWrap { display: block; } /* -- infinite scroll Pagination -- */ #infscr-loading img { display: none !important;} /*---------------------------------------------------------------------------- ----------------------------- 4 - Entry Content ------------------------------- -----------------------------------------------------------------------------*/ h1.article-title { font-size: 30px; line-height: 36px; } h1.page-title { font-size: 30px; line-height: 36px; } /* -- Single post types -- */ img.attachment-thumbnail-single-image { width: 100%; height: auto;} .single-gallery img { width: 146px; height: 146px;} iframe.single_iframe { width: 100%; height: 300px;} /* -- Entry bottom -- */ .entry-bottom { width: 100%; } /*----------------------------------------------------------------------------- ----------------------------- 5 - Sidebar & Widgets --------------------------- -----------------------------------------------------------------------------*/ /* -- Sidebar -- */ .sidebar-middle { display: none;} /* -- Sidebar single page -- */ .sidebar { width: 440px; float: left;} .sidebar .widget { width: 440px; float: left; margin: 0 0 40px 0;} .sidebar .article_list li img, .sidebar .article_list li .media-icon { display: none;} /* -- FeedBurner -- */ #newsletter-form input.newsletter-btn { width: 100%; margin-left: 1px;} /*----------------------------------------------------------------------------- ----------------------------- 7 - Comments Form ------------------------------- -----------------------------------------------------------------------------*/ ul.comment { width: 100%; } /* -- Comments -- */ .comments { width: 100%; } ul.comment li { float: left;} /*----------------------------------------------------------------------------- ----------------------------- 8 - Custom Pages -------------------------------- -----------------------------------------------------------------------------*/ /* -- Tag & Category Index -- */ #mcTagMap .holdleft, #sc_mcTagMap .holdleft { width: 126px !important; } /*----------------------------------------------------------------------------- ----------------------------- 10 - Footer ------------------------------------- -----------------------------------------------------------------------------*/ .wrap-footer { width: 460px;} /* -- footer banner -- */ .footer-banner-970 { display: none;} .footer-banner-728 { display: none;} .footer-banner-468 { display: block;} /* -- Copyright -- */ .copyright { width: 100%;} /* -- Footer Social Icons -- */ ul.footer-social li { margin: 27px 5px 0 5px; } ul.footer-social li a { text-align: center; padding: 5px 4px; } } /* All Mobile Size (devices) */ @media only screen and (max-width: 479px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ .wrap { width: 285px; padding: 30px 10px; } .top-wrap { width: 305px; } .wrap-fullwidth { width: 305px !important; } .wrap-content { width: 280px !important; margin-left: 10px; } .single-content, .page-content { width: 285px; height: auto; float: left; margin-top: 5px;} #background { display: none;} /*----------------------------------------------------------------------------- ----------------------------- 2 - Header -------------------------------------- -----------------------------------------------------------------------------*/ /* -- Logo -- */ .logo { display: block; float: none; margin-left: auto; margin-right: auto; } /* -- Ads Header -- */ .header-728 { display: none;} /* -- Ads Header -- */ .header-468 { display: none;} /* -- Popular Words -- */ .popular-words { display: none;} /* -- Top social icons -- */ ul.top-social { float: left;} .top-social li { padding: 11px 0 0 15px; font-size: 18px;} /* -- Header with menu -- */ .firstmenu { margin-top: 40px; } /* Search */ #searchform2 { float: left; margin-left: 10px;} #searchform2 #s { width: 215px; } /* -- Live Search -- */ ul.dwls_search_results { width: 287px !important; } ul.search_results li.post_with_thumb a { width: 180px !important;} /* -- Top Header Menu -- ##################### */ .jquerycssmenu { display: none;} /* -- Sticky Header -- */ .sticky { display: none;} /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* -- Home blog posts -- */ .masonry .item_an, .masonry .item_an2 { width: 260px; } .item_an.big, .item_an2.big { width: 260px; } /* -- Hover Image -- */ a.imgWrap { display: block; } /* -- infinite scroll Pagination -- */ #infscr-loading img { display: none !important;} /*---------------------------------------------------------------------------- ----------------------------- 4 - Entry Content ------------------------------- -----------------------------------------------------------------------------*/ h1.article-title { font-size: 26px; line-height: 34px; } h1.page-title { font-size: 26px; line-height: 34px; } /* -- Single post types -- */ img.attachment-thumbnail-single-image { width: 100%; height: auto;} .single-gallery img { width: 95px; height: 95px;} iframe.single_iframe { width: 100%; height: 200px;} /* -- Entry bottom -- */ .entry-bottom { width: 100%; } /* -- 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;} /*----------------------------------------------------------------------------- ----------------------------- 5 - Sidebar & Widgets --------------------------- -----------------------------------------------------------------------------*/ /* -- Sidebar -- */ .sidebar-middle { display: none;} /* -- Sidebar single page -- */ .sidebar { width: 285px; float: left;} .sidebar .widget { width: 285px; float: left; margin: 0 0 40px 0;} .sidebar .article_list li img, .sidebar .article_list li .media-icon { display: none;} .textwidget p { margin-left: -7px;} /* -- FeedBurner -- */ #newsletter-form input.newsletter-btn { width: 100%; margin-left: 1px;} /*----------------------------------------------------------------------------- ----------------------------- 7 - Comments Form ------------------------------- -----------------------------------------------------------------------------*/ ul.comment { width: 100%; } /* -- Comments -- */ .comments { width: 100%; } 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: 121px !important; } /*----------------------------------------------------------------------------- ----------------------------- 10 - Footer ------------------------------------- -----------------------------------------------------------------------------*/ .wrap-footer { width: 305px;} /* -- footer banner -- */ .footer-banner-970 { display: none;} .footer-banner-728 { display: none;} .footer-banner-468 { display: none;} /* -- Copyright -- */ .copyright { width: 100%;} /* -- Footer Social Icons -- */ ul.footer-social li { margin: 27px 5px 0 5px; } ul.footer-social li a { text-align: center; padding: 5px 4px; } /* -- 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;} }