/* ============================================================ Tpl_wangyanyun responsive override stylesheet Layered ON TOP of global.css / index.css / tp2016.css. Pure ASCII on purpose (template files are GB2312 encoded). Scope: phone + small tablet reflow. Desktop (>=981px) untouched. Loaded last in ; all rules use !important to win cascade against default-color.css which is injected inside . ============================================================ */ /* ---------- shared fluid helpers (<=980px) ---------- */ @media screen and (max-width:980px) { body.min990 { min-width:0 !important; } .wide1190 { min-width:0 !important; max-width:100% !important; width:auto !important; padding-left:12px !important; padding-right:12px !important; box-sizing:border-box !important; } .horizontal-center { width:auto !important; } img { max-width:100%; height:auto; } } /* ================= PHONE (<=750px) ================= */ @media screen and (max-width:750px) { /* ----- top utility bar ----- */ #header2016 .headerTop { height:auto !important; } #header2016 .headerTop .headerTop-content { padding:6px 12px !important; line-height:30px !important; } #header2016 .headerTop .topnav { float:none !important; display:block !important; text-align:left !important; } #header2016 .headerTop .topnav li { float:none !important; display:inline-block !important; margin-right:10px; } #header2016 .headerTop .login-left { float:none !important; display:block !important; clear:both !important; text-align:left !important; } #header2016 .common-dropdown { position:absolute !important; } /* ----- logo + main nav ----- */ #header2016 .header-nav { height:auto !important; padding:6px 0 !important; } #header2016 .header-nav .header-pos { width:100% !important; } #header2016 .header-nav .logo { float:none !important; display:block !important; text-align:center !important; margin:4px auto 8px !important; height:auto !important; } #header2016 .header-nav .logo img { max-height:46px; width:auto; } #header2016 .main-nav-wrapper, #header2016 .index-nav { float:none !important; width:100% !important; height:auto !important; margin:0 !important; overflow-x:auto !important; overflow-y:hidden !important; white-space:nowrap !important; -webkit-overflow-scrolling:touch; text-align:left !important; border-top:1px solid #eee; } #header2016 .main-nav-wrapper li { float:none !important; display:inline-block !important; } #header2016 .main-nav-wrapper li a.nav-menu { height:44px !important; line-height:44px !important; padding:0 13px !important; margin:0 !important; font-size:15px !important; display:inline-block !important; border-bottom:3px solid transparent !important; } #header2016 .main-nav-wrapper li a.nav-menu.current, #header2016 .main-nav-wrapper li a.nav-menu:hover { border-bottom:3px solid #00a6d8 !important; } /* ----- banner ----- */ #banner, #banner .slide-wrapper li, .sec-banner, .sec-banner .slide-wrapper li { height:170px !important; } #banner .slide, .sec-banner .slide { background-size:cover !important; background-position:center center !important; } #banner .slide-pagination, .sec-banner .slide-pagination { bottom:8px !important; } /* ----- domain query block ----- */ .domain-top { padding:12px 0 !important; } .domain-top .font18 { float:none !important; display:block !important; font-size:16px !important; line-height:24px !important; } .domain-top .f-r { float:none !important; display:block !important; margin:6px 0 0 !important; } .query-container { padding:10px !important; } .query-container .query-input-container { margin-right:0 !important; } .query-container .query-input-container .common-input { width:100% !important; box-sizing:border-box !important; } .query-container .domain-query-btn { position:static !important; right:auto !important; top:auto !important; width:100% !important; margin-top:10px !important; border-radius:4px !important; } .query-container .pre-links { position:static !important; right:auto !important; top:auto !important; margin-top:8px; } .domext-container { box-shadow:none !important; } .domext-select-container { text-align:left !important; line-height:30px !important; } .domext-select-container label { display:inline-block !important; margin-right:12px; } /* ----- 5 product cards ----- */ .product-bg { height:auto !important; padding:20px 0 25px !important; background-size:cover !important; } .product-con { padding-top:0 !important; } .product-con ul { overflow:hidden; } .product-con ul li { width:50% !important; float:left !important; margin-bottom:14px; } .product-con ul li:last-child { width:100% !important; } .product-list-con { margin:0 6px !important; padding-bottom:6px; } .product-list-con .product-icon { margin-top:-30px !important; } /* ----- section titles ----- */ .wide1190 > h1.title, .gray-bg h1.title, .normal-bg h1.title { font-size:20px !important; line-height:30px !important; text-align:center !important; } /* ----- recommended hosting columns (tabs) ----- */ .columnList-container { float:none !important; width:100% !important; } .columnList { width:100% !important; } .columnList > li, .westhostlist > li { width:100% !important; float:none !important; display:block !important; margin-bottom:14px; } .column { margin-top:0 !important; } .webhost-li.column, .column-vhost { width:auto !important; } .columnList .column.first-col, .columnList .column.last-col { margin:0 0 14px !important; } /* ----- about us ----- */ .aboutus { padding:20px 0 !important; } .aboutus .aboutus-con { width:100% !important; } .aboutus .aboutus-title { font-size:20px !important; } .aboutus p { font-size:14px !important; line-height:24px !important; } /* ----- footer trust badges ----- */ .footer-top { padding:18px 0 !important; } .footer-top .footer-top-list li { float:none !important; width:100% !important; padding:0 0 12px !important; margin:0 !important; } .footer-top-list .section { height:50px !important; background-position:0 center !important; } .footer-top-list .section .section-title { padding-left:60px !important; padding-top:14px !important; font-size:16px !important; } /* ----- footer bottom ----- */ #footer2016 .footer-bottom { text-align:center !important; padding:14px 12px 24px !important; line-height:24px !important; } #footer2016 .footer-bottom p { font-size:13px !important; } #footer2016 .footer-bottom a { display:inline-block !important; } } /* ============== SMALL PHONE (<=480px) ============== */ @media screen and (max-width:480px) { .product-con ul li { width:100% !important; } #banner, #banner .slide-wrapper li { height:140px !important; } #header2016 .main-nav-wrapper li a.nav-menu { padding:0 10px !important; font-size:14px !important; } .wide1190 { padding-left:10px !important; padding-right:10px !important; } } /* ============================================================ INNER PAGES (services / buy / customercenter / news ...) Site-wide: this sheet is injected via config/top.html so every page that includes {#top.html} gets mobile reflow. Conservative strategy: fluid containers + horizontal-scroll wrappers for wide spec tables (do NOT tear tables apart). ============================================================ */ @media screen and (max-width:980px) { #content, .content { width:auto !important; min-width:0 !important; } .content { padding:10px 0 20px !important; } img { max-width:100% !important; height:auto; } table { max-width:100% !important; } } @media screen and (max-width:750px) { /* ----- page title blocks (kill the 310px bg-image indent) ----- */ .content-title, .basic-title, .database-title, .twolinevhost-title, .morelinevhost-title, .twhost-title, .hkhost-title, .usa-title, .linux_host-title, .superg-title, .asp_net-title, .java-title, .szhost-title, .hostlist-title, .sites-title { padding:16px 12px !important; min-height:0 !important; background-image:none !important; background:none !important; } .content-title h1 { font-size:22px !important; line-height:30px !important; } .content-title p { font-size:13px !important; padding-right:0 !important; text-indent:0 !important; } /* ----- left sidebar: stack full-width above content ----- */ #MainLeft, #MainContentDIV, #thrColEls .Style2009 #MainContentDIV #MainLeft { width:100% !important; float:none !important; clear:both !important; margin:0 0 12px !important; } .DomainLeftMenu, #DomainLeftMenuContent, #DomainLeftMenuContentList { width:100% !important; float:none !important; } #DomainLeftMenuContentList ul li { float:left !important; width:auto !important; } #DomainLeftGuestSay, #DomainLeftMenuBottom { display:none !important; } /* ----- horizontal tab lists -> scrollable ----- */ .webhosting-tab .webhosting-tab-list, ul.webhosting-tab { overflow-x:auto !important; overflow-y:hidden !important; white-space:nowrap !important; -webkit-overflow-scrolling:touch; } .webhosting-tab .webhosting-tab-list li { float:none !important; display:inline-block !important; width:auto !important; min-width:120px !important; height:44px !important; line-height:44px !important; font-size:14px !important; } .webhosting-tab .webhosting-tab-list li.active { width:auto !important; } /* ----- wide spec tables: scroll inside their container ----- */ .webhosting-info, .sites-info, .sites-explain, .webhosting-explain { padding:12px 8px !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; } .webhosting-info table tr .left, .sites-info table tr .left { width:88px !important; padding-left:6px !important; font-size:13px !important; } .webhosting-info table tr td { font-size:12px !important; } .webhosting-info table.high-light-table { display:none !important; } /* ----- buttons: tap-friendly, full-width in stacks ----- */ .btnDiv { padding:10px 0 !important; } .btnDiv a, .g-common-btn { display:block !important; width:auto !important; margin:8px 12px !important; padding:10px 0 !important; text-align:center !important; font-size:15px !important; line-height:22px !important; border-radius:4px !important; } .info-btn { width:auto !important; padding:0 14px !important; } /* ----- forms / inputs ----- */ .common-input, input[type=text], input[type=password], select, textarea { width:100% !important; max-width:100% !important; box-sizing:border-box !important; } .select-webhost { padding:0 !important; } /* ----- product detail / buy pages ----- */ .page-content .page-info, .page-content .page-info-side, .product-detail-desc, .product-explain, .pay-explain { padding:14px 12px !important; margin:12px 0 !important; } .product-detail-desc { margin:14px 0 !important; padding:14px 12px !important; } .page-content .page-flow { width:100% !important; } }