/* --------------------------------------------------- Styles for Mobile Devices --------------------------------------------------- */ /* 1350px (devices and browsers) */ @media only screen and (min-width: 1300px) and (max-width: 1700px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ .wrap-left-content-full { width: 1300px; min-height: 500px; margin: 0 auto;} /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* ##### Modern Articles List ######## */ ul.modern-grid { width: 1160px; /* min-width: 1160px; */ } /* -- Index file Title -- */ h3.index-title { margin: 20px 0 -40px 79px; } } /* 1350px (devices and browsers) */ @media only screen and (min-width: 1260px) and (max-width: 1290px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ /* - Layout content - */ .wrap-fullwidth-bg { width: 1080px; } /* -- Home -- */ .wrap-left-content-full { width: 1200px; min-height: 500px; margin: 0 auto; } /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* ##### Modern Articles List ######## */ ul.modern-grid { width: 1165px; /* min-width: 1160px; */ } /* -- Index file Title -- */ h3.index-title { margin: 20px 0 -40px 35px; } } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 1004px) and (max-width: 1260px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ html body { margin: 20px 0 0 0; } /* - Header - */ header div.wrap { width: 980px; } /* - Layout content - */ .wrap-fullwidth { width: 980px; } .wrap-fullwidth-bg { width: 980px; } /* -- Home left -- */ .wrap-container { width: 980px; } .wrap-left-content { width: 440px; height: auto; float: left; margin: 0 20px 0 20px;} /* -- Home -- */ .wrap-left-content-full { width: 980px; } /* - single-content - */ .single-content { width: 660px; } .page-content { width: 650px; } /*----------------------------------------------------------------------------- ----------------------------- 2 - Header -------------------------------------- -----------------------------------------------------------------------------*/ /* -- Top social icons -- */ ul.top-social li { display: none; } ul.top-social li.search { display: block; margin-right: 40px;} /* Modal PopUp Search box */ #modal-7 { margin-right: -85px;} /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* -- Subheader -- */ .subheader { width: 860px; height: 60px; margin: 0 auto; } .welcome-section { width: 530px;} /* ##### Modern Articles List ######## */ ul.modern-grid { width: 880px; /* min-width: 1160px; */ } /* -- Index file Title -- */ h3.index-title { margin: 20px 0 -40px 60px; } /*----------------------------------------------------------------------------- ----------------------------- 4 - Entry Content ------------------------------- -----------------------------------------------------------------------------*/ /* -- Entry Top / Featured Image / Videos -- */ .entry-top { margin: 0 25px; padding: 30px 0; } /* -- Entry content style -- */ .entry { } /* -- Related Articles -- */ section.middle-related ul.modern-grid { width: 680px; /* +20px */ margin: 0 0 0 -20px; } section.middle-related ul.modern-grid li { width: 150px; } section.middle-related ul.modern-grid li .snip1252 { width: 150px; } /* - title - */ h1.page-title { margin-left: 0;} /*----------------------------------------------------------------------------- ----------------------------- 6 - Comments Form ------------------------------- -----------------------------------------------------------------------------*/ /* -- Comments -- */ #comments { } /*----------------------------------------------------------------------------- ----------------------------- 8 - Custom Pages -------------------------------- -----------------------------------------------------------------------------*/ /* -- Front-end Submission Form -- */ #submission-form { width: 285px; } .submission-form { margin: 50px 25px 50px 0;} /*----------------------------------------------------------------------------- ------------------------------ 9 - Footer ------------------------------------- -----------------------------------------------------------------------------*/ .wrap-footer { width: 90%; padding-left: 5%; padding-right: 5%; } /*----------------------------------------------------------------------------- ----------------------------- 10 - Shortcodes --------------------------------- -----------------------------------------------------------------------------*/ /* -- Accordion -- */ .accordionButton, .accordionButton1, .accordionButton2, .accordionButton3 { width: 90%; padding-left: 10%; } } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 760px) and (max-width: 1000px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ html body { margin: 20px 0 0 0; } /* - Header - */ header div.wrap { width: 750px; } /* - Layout content - */ .wrap-fullwidth { width: 750px; } .wrap-fullwidth-bg { width: 750px; } /* -- Home left -- */ .wrap-container { width: 750px; } .wrap-left-content-full { width: 750px; } /* - single-content - */ .single-content { width: 430px; } .page-content { width: 420px; } /*----------------------------------------------------------------------------- ----------------------------- 2 - Header -------------------------------------- -----------------------------------------------------------------------------*/ /* -- Top Header Menu -- ##################### */ .jquerycssmenu { display: none;} /* -- Top social icons -- */ ul.top-social li { display: none; } ul.top-social li.search { display: block; margin-right: 40px;} /* Modal PopUp Search box */ #modal-7 { margin-right: -85px;} /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* -- Subheader -- */ .subheader { width: 750px; height: auto; margin: 0 auto; } .welcome-section { width: 530px; float: none; margin: 0 auto 0 auto; display: block; } .custom-dropdown { width: 280px; float: none; margin: 0 auto 0 auto; display: block; } .welcome-section h1 { display: block; text-align: center;} /* ##### Modern Articles List ######## */ ul.modern-grid { width: 730px; } /* -- Index file Title -- */ h3.index-title { margin: 20px 0 -40px 20px; } /*----------------------------------------------------------------------------- ----------------------------- 4 - Entry Content ------------------------------- -----------------------------------------------------------------------------*/ /* -- Entry Top / Featured Image / Videos -- */ .entry-top { margin: 0 25px; padding: 30px 0; } /* -- Entry content style -- */ .entry { } /* -- Related Articles -- */ section.middle-related ul.modern-grid { width: 450px; /* +20px */ margin: 0 0 0 -20px; } section.middle-related ul.modern-grid li { width: 130px; } section.middle-related ul.modern-grid li .snip1252 { width: 130px; } /* - title - */ h1.page-title { margin-left: 0;} /* -- Meta entry -- */ ul.meta-entry-top li.author { display: none;} /*----------------------------------------------------------------------------- ----------------------------- 6 - Comments Form ------------------------------- -----------------------------------------------------------------------------*/ /* -- Comments -- */ #comments { width: 380px; float: none; margin: 25px auto; } .comments { margin: 50px auto 50px auto;} /*----------------------------------------------------------------------------- ----------------------------- 8 - Custom Pages -------------------------------- -----------------------------------------------------------------------------*/ /* -- 404 page -- */ #anthemes-404 .middle-404 { max-width: 700px; margin: 0 auto;} /* -- Front-end Submission Form -- */ #submission-form { width: 380px; float: none; margin: 25px auto; } .submission-form { margin: 50px 0 50px 0;} /*----------------------------------------------------------------------------- ------------------------------ 9 - Footer ------------------------------------- -----------------------------------------------------------------------------*/ .wrap-footer { width: 90%; padding-left: 5%; padding-right: 5%; } /*----------------------------------------------------------------------------- ----------------------------- 10 - Shortcodes --------------------------------- -----------------------------------------------------------------------------*/ /* -- Accordion -- */ .accordionButton, .accordionButton1, .accordionButton2, .accordionButton3 { width: 85%; padding-left: 15%; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 580px) and (max-width: 760px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ html body { margin: 20px 0 0 0; } /* - Header - */ header div.wrap { width: 570px; } /* - Layout content - */ .wrap-fullwidth { width: 570px; } .wrap-fullwidth-bg { width: 570px; } /* -- Home left -- */ .wrap-container { width: 570px; } .wrap-left-content-full { width: 570px; } /* - single-content - */ .single-content { width: 570px; } .sidebar { width: 570px; float: left; margin-top: 30px; } .sidebar .widget { width: 470px; margin: 0 auto 25px auto; padding-right: 50px; padding-left: 50px;} /* - page content - */ .page-content { width: 560px; } /*----------------------------------------------------------------------------- ----------------------------- 2 - Header -------------------------------------- -----------------------------------------------------------------------------*/ /* -- Top Header Menu -- ##################### */ .jquerycssmenu { display: none;} /* -- Top social icons -- */ ul.top-social li { display: none; } ul.top-social li.search { display: block; margin-right: 40px;} /* Modal PopUp Search box */ #modal-7 { margin-right: -85px;} /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* -- Subheader -- */ .subheader { width: 570px; height: auto; margin: 0 auto; } .welcome-section { width: 570px; float: none; margin: 0 auto 0 auto; display: block; } .custom-dropdown { width: 280px; float: none; margin: 0 auto 0 auto; display: block; } .welcome-section h1 { display: block; text-align: center;} /* ##### Modern Articles List ######## */ ul.modern-grid { width: 580px; } /* -- Index file Title -- */ h3.index-title { margin: 20px 0 -40px 10px; } /*----------------------------------------------------------------------------- ----------------------------- 4 - Entry Content ------------------------------- -----------------------------------------------------------------------------*/ /* -- Entry Top / Featured Image / Videos -- */ .entry-top { margin: 0 25px; padding: 30px 0; } /* -- Entry content style -- */ .entry { } /* -- Related Articles -- */ section.middle-related ul.modern-grid { width: 590px; /* +20px */ margin: 0 0 0 -20px; } section.middle-related ul.modern-grid li { width: 127px; } section.middle-related ul.modern-grid li .snip1252 { width: 127px; } /* - title - */ h1.page-title { margin-left: 0;} /* -- Meta entry -- */ ul.meta-entry-top li.author { display: none;} /*----------------------------------------------------------------------------- ----------------------------- 5 - Sidebar & Widgets --------------------------- -----------------------------------------------------------------------------*/ /* -- Banner widget 300px -- */ .sidebar .widget .img-300 { width: 300px; height: auto; margin: 0 auto;} /* -- Banner widget 250px -- */ .sidebar .widget .img-250 { width: 250px; height: auto; margin: 0 auto; } /*----------------------------------------------------------------------------- ----------------------------- 6 - Comments Form ------------------------------- -----------------------------------------------------------------------------*/ /* -- Comments -- */ #comments { width: 520px; } /*----------------------------------------------------------------------------- ----------------------------- 8 - Custom Pages -------------------------------- -----------------------------------------------------------------------------*/ /* -- 404 page -- */ #anthemes-404 { padding: 100px 0 100px 0;} #anthemes-404 .middle-404 { width: 80%; margin: 0 auto;} #anthemes-404 .widget_recent_entries { margin: 20px auto 0 auto;} #anthemes-404 h1 { font-size: 60px; padding: 0 0 40px 0;} #anthemes-404 p { font-size: 20px; line-height: 32px;} #anthemes-404 .one_half, #anthemes-404 .one_half_last { float:left; width:100%; margin-bottom:10px; margin-right:0; } #anthemes-404 .one_half_last { margin-right:0;} /* -- Front-end Submission Form -- */ #submission-form { width: 470px; float: none; margin: 0 auto 25px auto; } .submission-form { margin: 50px 50px 50px 50px;} /*----------------------------------------------------------------------------- ------------------------------ 9 - Footer ------------------------------------- -----------------------------------------------------------------------------*/ .wrap-footer { width: 90%; padding-left: 5%; padding-right: 5%; } /* -- Footer Social Icons -- */ ul.footer-social li span { font-size: 16px; display: none;} /*----------------------------------------------------------------------------- ----------------------------- 10 - Shortcodes --------------------------------- -----------------------------------------------------------------------------*/ /* -- Accordion -- */ .accordionButton, .accordionButton1, .accordionButton2, .accordionButton3 { width: 90%; padding-left: 10%; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 580px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ html body { margin: 20px 0 0 0; } /* - Header - */ header div.wrap { width: 460px; } /* - Layout content - */ .wrap-fullwidth { width: 460px; } .wrap-fullwidth-bg { width: 460px; } /* -- Home left -- */ .wrap-container { width: 460px; } .wrap-left-content-full { width: 460px; } /* - single-content - */ .single-content { width: 460px; } .sidebar { width: 460px; float: left; margin-top: 30px; } .sidebar .widget { width: 360px; margin: 0 auto 25px auto; padding-right: 50px; padding-left: 50px;} /* - page content - */ .page-content { width: 450px; } /*----------------------------------------------------------------------------- ----------------------------- 2 - Header -------------------------------------- -----------------------------------------------------------------------------*/ /* -- Top Header Menu -- ##################### */ .jquerycssmenu { display: none;} /* -- Top social icons -- */ ul.top-social li { display: none; } ul.top-social li.search { display: block; margin-right: 40px;} /* Modal PopUp Search box */ #modal-7 { margin-right: -85px; z-index: 999999;} /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* -- Subheader -- */ .subheader { width: 420px; height: auto; margin: 0 auto; } .welcome-section { width: 420px; float: none; margin: 0 auto 0 auto; display: block; } .custom-dropdown { width: 280px; float: none; margin: 0 auto 0 auto; display: block; } .welcome-section h1 { font-size: 17px; display: block; text-align: center;} /* ##### Modern Articles List ######## */ ul.modern-grid { width: 440px; } /* -- Index file Title -- */ h3.index-title { margin: 20px 0 -40px 20px; } /*----------------------------------------------------------------------------- ----------------------------- 4 - Entry Content ------------------------------- -----------------------------------------------------------------------------*/ /* -- Entry Top / Featured Image / Videos -- */ .entry-top { margin: 0 25px; padding: 30px 0; } /* -- Related Articles -- */ section.middle-related ul.modern-grid { width: 480px; /* +20px */ margin: 0 0 0 -20px; } section.middle-related ul.modern-grid li { width: 140px; } section.middle-related ul.modern-grid li .snip1252 { width: 140px; } /* - title - */ h1.article-title { font-size: 24px; line-height: 38px; } /* - title - */ h1.page-title { margin-left: 0;} /* -- Meta entry -- */ ul.meta-entry-top li.author { display: none;} /*----------------------------------------------------------------------------- ----------------------------- 5 - Sidebar & Widgets --------------------------- -----------------------------------------------------------------------------*/ /* -- Banner widget 300px -- */ .sidebar .widget .img-300 { width: 300px; height: auto; margin: 0 auto;} /* -- Banner widget 250px -- */ .sidebar .widget .img-250 { width: 250px; height: auto; margin: 0 auto; } /*----------------------------------------------------------------------------- ----------------------------- 6 - Comments Form ------------------------------- -----------------------------------------------------------------------------*/ /* -- Comments -- */ #comments { width: 410px; } /*----------------------------------------------------------------------------- ----------------------------- 8 - Custom Pages -------------------------------- -----------------------------------------------------------------------------*/ /* -- 404 page -- */ #anthemes-404 { padding: 100px 0 100px 0;} #anthemes-404 .middle-404 { width: 80%; margin: 0 auto;} #anthemes-404 .widget_recent_entries { margin: 20px auto 0 auto;} #anthemes-404 h1 { font-size: 60px; padding: 0 0 40px 0;} #anthemes-404 p { font-size: 20px; line-height: 32px;} #anthemes-404 .one_half, #anthemes-404 .one_half_last { float:left; width:100%; margin-bottom:10px; margin-right:0; } #anthemes-404 .one_half_last { margin-right:0;} /* -- Front-end Submission Form -- */ #submission-form { width: 410px; float: none; margin: 0 auto 25px auto; } .submission-form { margin: 50px 25px 50px 25px;} /*----------------------------------------------------------------------------- ------------------------------ 9 - Footer ------------------------------------- -----------------------------------------------------------------------------*/ .wrap-footer { width: 90%; padding-left: 5%; padding-right: 5%; padding-bottom: 70px; } /*----------------------------------------------------------------------------- ----------------------------- 10 - Shortcodes --------------------------------- -----------------------------------------------------------------------------*/ /* -- Accordion -- */ .accordionButton, .accordionButton1, .accordionButton2, .accordionButton3 { width: 85%; padding-left: 13%; } } /* All Mobile Size (devices) */ @media only screen and (max-width: 479px) { /*----------------------------------------------------------------------------- ----------------------------- 1 - Layout -------------------------------------- -----------------------------------------------------------------------------*/ html body { margin: 20px 0 0 0; } /* - Header - */ header div.wrap { width: 305px; } /* - Layout content - */ .wrap-fullwidth { width: 100%; } .wrap-fullwidth-bg { width: 100%; } /* -- Home left -- */ .wrap-container { width: 305px; } .wrap-left-content-full { width: 305px; } /* - single-content - */ .single-content { width: 100%; } .sidebar { width: 100%; float: left; margin: 30px auto 0 auto; } .sidebar .widget { width: 90%; margin: 0 auto 25px auto; padding-right: 5%; padding-left: 5%;} /* - page content - */ .page-content { width: 100%; } .page-content .entry, .wrap-fullwidth-bg .entry { padding-left: 25px; padding-right: 25px;} /*----------------------------------------------------------------------------- ----------------------------- 2 - Header -------------------------------------- -----------------------------------------------------------------------------*/ /* -- Top Header Menu -- ##################### */ .jquerycssmenu { display: none;} /* -- Top social icons -- */ ul.top-social li { display: none; } ul.top-social li.search { display: block; margin-right: 40px;} /* Modal PopUp Search box */ #modal-7 { margin-right: -85px; z-index: 999999;} /*----------------------------------------------------------------------------- ----------------------------- 3 - Home Content -------------------------------- -----------------------------------------------------------------------------*/ /* -- Subheader -- */ .subheader { width: 305px; height: auto; margin: 0 auto; } .welcome-section { width: 305px; float: none; margin: 0 auto 0 auto; display: block; } .custom-dropdown { width: 280px; float: none; margin: 0 auto 0 auto; display: block; } .welcome-section h1 { font-size: 16px; display: block; text-align: center; } /* ##### Modern Articles List ######## */ ul.modern-grid { width: 300px; } ul.modern-grid li, .snip1252 { width: 130px; } /* -- Index file Title -- */ h3.index-title { margin: 20px 0 -40px 20px; } /*----------------------------------------------------------------------------- ----------------------------- 4 - Entry Content ------------------------------- -----------------------------------------------------------------------------*/ /* -- Entry Top / Featured Image / Videos -- */ .entry-top { margin: 0 25px; padding: 30px 0; } /* -- Related Articles -- */ section.middle-related ul.modern-grid { width: 320px; /* +20px */ margin: 0 auto 0 auto; } section.middle-related ul.modern-grid li { width: 150px; margin: 0 5px 20px 5px; } section.middle-related ul.modern-grid li .snip1252 { width: 150px; } /* - title - */ h1.article-title { font-size: 20px; line-height: 32px; } /* - title - */ h1.page-title { margin-left: 25px;} /* -- Meta entry -- */ ul.meta-entry-top li.author { display: none;} /* -- Single Share -- */ ul.single-share { margin-top: 3px; } ul.single-share a span { display: none;} .entry ul.single-share li a { padding: 3px 10px; } ul.single-share li a.fbbutton { padding-right: 8px !important; padding-left: 8px !important;} /*----------------------------------------------------------------------------- ----------------------------- 5 - Sidebar & Widgets --------------------------- -----------------------------------------------------------------------------*/ /* -- Banner widget 300px -- */ .sidebar .widget .img-300 { width: 300px; height: auto; margin: 0 auto;} /* -- Banner widget 250px -- */ .sidebar .widget .img-250 { width: 250px; height: auto; margin: 0 auto; } /*----------------------------------------------------------------------------- ----------------------------- 6 - Comments Form ------------------------------- -----------------------------------------------------------------------------*/ /* -- Comments -- */ #comments { width: 310px; float: none; margin: 0 auto; } .comments { margin: 50px 0 50px 0;} /*----------------------------------------------------------------------------- ----------------------------- 8 - Custom Pages -------------------------------- -----------------------------------------------------------------------------*/ /* -- 404 page -- */ #anthemes-404 { padding: 100px 0 100px 0;} #anthemes-404 .middle-404 { width: 80%; margin: 0 auto;} #anthemes-404 .widget_recent_entries { margin: 20px auto 0 auto;} #anthemes-404 h1 { font-size: 60px; padding: 0 0 40px 0;} #anthemes-404 p { font-size: 20px; line-height: 32px;} #anthemes-404 .one_half, #anthemes-404 .one_half_last { float:left; width:100%; margin-bottom:10px; margin-right:0; } #anthemes-404 .one_half_last { margin-right:0;} /* -- Front-end Submission Form -- */ #submission-form { width: 90%; float: none; margin: 0 auto 25px auto; } .submission-form { margin: 50px 5% 50px 5%;} /*----------------------------------------------------------------------------- ------------------------------ 9 - Footer ------------------------------------- -----------------------------------------------------------------------------*/ .wrap-footer { width: 90%; height: auto; padding-left: 5%; padding-right: 5%; padding-bottom: 70px; } /*----------------------------------------------------------------------------- ----------------------------- 10 - Shortcodes --------------------------------- -----------------------------------------------------------------------------*/ /* -- Accordion -- */ .accordionButton, .accordionButton1, .accordionButton2, .accordionButton3 { width: 80%; padding-left: 17%; } /* -- 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;} }