/************************************************************************************ MEDIA QUERIES *************************************************************************************/ /* for 1200px or more */ @media screen and (min-width: 1200px) { #header, #heading, #feature, #content, #mid, #footer { width: 1100px; } #all-stores .thumbnails li:nth-child(6), #all-stores .thumbnails li:nth-child(12), #all-stores .thumbnails li:nth-child(18), #all-stores .thumbnails li:nth-child(24), #all-stores .thumbnails li:nth-child(30) { margin-right: 0%; } } /* for 1025px or more */ @media screen and (min-width: 1025px) { #home-deals div:nth-child(4), #home-deals div:nth-child(8), #home-deals div:nth-child(12), #home-deals div:nth-child(16), #home-deals div:nth-child(20), #home-deals div:nth-child(24), #home-deals div:nth-child(28), #home-deals div:nth-child(32), #home-deals div:nth-child(36), #home-deals div:nth-child(40), #home-deals div:nth-child(44), #home-deals div:nth-child(48), #home-deals div:nth-child(52), #home-deals div:nth-child(56), #home-deals div:nth-child(60), #home-deals div:nth-child(64), #home-deals div:nth-child(68), #home-deals div:nth-child(72), #home-deals div:nth-child(76), #home-deals div:nth-child(80), #home-deals div:nth-child(84) { margin-right: 0%; } } /* for 1160px or less */ @media screen and (max-width: 1160px) { #search-form { width: 42%; } #footer ul { padding-right: 20px; } } /* for 1070px or less */ @media screen and (max-width: 1070px) { #footer ul.divider { border:none; padding-left: 0px; } #footer ul li { font-size: 0.85em; line-height: 1.8em; } #mid-wrap ul li:last-child { } #mid-wrap ul li { padding: 0 4.7% 0 0; } #mid-wrap ul li img { height: 44px; } } /* for 1000px or less */ @media screen and (max-width: 1000px) { #footer .finduson { display: none; } } /* for iPad Resolution */ @media screen and (max-width: 1025px) { .deal { float: left; width: 31%; } .deal .btn { float: left; width: 78%; padding: 10px 10%; margin: 0 0 20px 0; line-height: 16px; } #all-stores .thumbnails li { float: left; width: 13.45%; } } /* for smaller tablets */ @media screen and (max-width: 940px) { #header-wrap { padding-top: 16px; padding-bottom: 16px; } #mob-menu-btn, #mob-search-btn { float: right; display: block; text-align: right; margin-top: 14px; font-size: 17px; color: #fff; cursor: pointer; cursor: hand; width: 28px; height: 28px; padding: 10px; border: solid 1px #c6e7f4; text-transform: uppercase; font-weight: bold; background: url(../images/mobile/nav-menu.png) no-repeat center center; background-size: auto 18px; -moz-border-radius: 3px; border-radius: 3px; } #mob-search-btn { background: url(../images/mobile/search-btn.png) no-repeat center center; background-size: auto 22px; margin-right: 10px; } #feature-wrap, #feature-wrap.home { background-size: 140% auto; padding: 9% 5% 0 5%; height: 200px; text-align: center; } #feature-wrap p { font-size: 1.4em; color: #000; width: 70%; margin: 0 auto 30px auto; } .expand-menu-btns { display: none; } .expand-search-box { display: none; } #left { width: 100%; padding-bottom: 20px; } #right { width: 100%; } #logo a { font-size: 18px; } #mid-wrap ul li { padding: 0 4.5% 0 0; } #mid-wrap ul li img { height: 40px; } #intro p { font-size: 15px; } #brand-text .brand-logo { padding: 15px 1.6%; width: 18%; } #brand-text .brand-logo span { height: 100px; } #brand-text .brand-logo img { width: 100%; } #brand-text .brand-text { float: right; width: 73%; } } @media screen and (max-width: 700px) { #heading h1 { font-size: 20px; text-align: center; } #heading .btn { display: none; } #mid-wrap #mail-list .mail-field { width: 69%; } #feature-wrap, #feature-wrap.home { background-size: 140% auto; padding: 9% 5% 0 5%; height: auto; text-align: center; } #feature-wrap p { font-size: 1.4em; color: #000; width: 60%; margin: 0 auto 60px auto; } #feature-wrap .btn { display: none; } #feature-wrap h1 { font-size: 2.0em; line-height: 30px; padding-top: 0; } #mid-wrap ul { width: 100%; } #mid-wrap ul li { width: 20%; padding: 0; margin: 0; text-align: center; } #mid-wrap ul li:nth-child(6) { display: none; } #mid-wrap ul li img { height: 40px; } #mid-wrap .btn { display: none; } .deal { float: left; width: 48%; } .deal-content h3 { min-height: 130px; margin: 0 0 40px 0; } #all-stores .thumbnails li { float: left; width: 18.5%; margin: 0 1% 15px 1%; } .fieldset-left { width: 98%; } .fieldset-right { float: left; width: 98%; } } /* for mobile */ @media screen and (max-width: 500px) { p, li { font-size: 1.0em; } #content-wrap { padding-top: 25px; padding-bottom: 15px; } #header .btn { float: left; width: 50%; padding: 8px 5%; margin: 0 20% 0 19%; text-align: center; } #logo { float: left; width: 100%; text-align: center; margin: 10px 0 10px 0; } #mob-menu-btn, #mob-search-btn { margin-top: 0; } #feature-wrap { background-size: 160% auto; padding: 9% 5% 0 5%; height: auto; text-align: center; } #feature-wrap p { font-size: 1.2em; color: #000; width: 70%; margin: 0 auto 30px auto; } #mid-wrap { padding-top: 22px; padding-bottom: 18px; } #mid-wrap ul li img { height: 30px; } .deal { float: left; width: 100%; margin: 0 0 30px 0; } .deal-content { width: 70%; padding: 20px 15% 5px 15%; min-height: 30px; } .deal-content h3 { min-height: 30px; margin: 0 0 40px 0; font-size: 17px; } .deal .btn { float: left; width: 50%; padding: 10px 10%; margin: 0 0 20px 15%; line-height: 16px; } #all-stores .thumbnails li { float: left; width: 26%; } #brand-text .brand-logo { padding: 20px; width: 30%; float: none; margin: 0 auto 20px auto; } #brand-text .brand-logo span { height: auto; } #brand-text .brand-text { float: right; width: 90%; text-align: center; padding: 0 5%; } #brand-text .brand-text p .btn { float: left; width: 88%; text-align: center; padding: 8px 5%} #footer p { font-size: 12px; } } @media screen and (max-width: 380px) { #feature-wrap { display: none; } }