css - media queries all use the same layout -
/*media queries start here*/ /*this modern laptops*/ @media screen , (max-width: 1336px) { .rectangle-box { position: relative !important; width: 10% !important; height: 82% !important; left: 10% !important; top: -10% !important; } #p-cactions { top: 461px; left: 410px; } #button { display: none !important; position: relative !important; top: -20% !important; left: 10% !important; z-index: 200 !important; } } /*this tablets*/ @media screen , (max-width: 1040px) { #border-search { position: absolute !important; top: 80px !important; left: 130px !important; z-index: 1 !important; } #searchform { position: relative !important; left: -90% !important; top: 0% !important; } #p-cactions { visibility: hidden; position: absolute !important; top: 461px !important; left: 30px !important; z-index: 0 !important; } #mw-searchbutton { position: relative !important; left: 210px !important; top: -460px !important; } #searchinput { position: relative !important; top: -476px !important; left: -85px !important; z-index: 2 !important; } li#n-mainpage-description { visibility: visible; position: relative; color: #ff7f27; top: 20px; left: -20px; z-index: 300; } li#n-recentchanges { visibility: visible; position: relative; color: #ff7f27; top: 20px; left: -40px; z-index: 300; } li#n-randompage { visibility: visible; position: relative; color: #ff7f27; top: 20px !important; left: -30px !important; z-index: 300; } li#n-help { visibility: visible; position: relative; color: #ff7f27; top: -65px !important; left: 120px !important; z-index: 300; } li#n-add-pix { visibility: visible; position: relative; color: #ff7f27; top: -85px !important; left: 220px !important; z-index: 300; } /*media query edit links appear when logged in*/ #ca-move { font-weight: bold; position: relative; top: 40px !important; left: 500px !important; background: transparent; } #ca-delete { font-weight: bold; position: relative; color: #ff7f27; top: -15px !important; left: 400px !important; text-indent:0; display:block; background: transparent; } #ca-watch { font-weight: bold; position: relative; color: #ff7f27; background: transparent; top: 35px !important; left: 590px !important; text-indent:0; } #ca-edit { font-weight: bold; position: relative; top: 15px !important; left: 510px !important; } #ca-protect { font-weight: bold; position: relative; top: 20px !important; left: 415px !important; background: transparent; } #ca-unwatch { font-weight: bold; position: relative; top: 40px !important; left: 570px !important; background: transparent; } /*media query edit links appear when logged in , logged out*/ #ca-history { font-weight: bold; position: absolute; top: -10px !important; left: 590px !important; } #ca-talk { font-weight: bold; color: #ff7f27; position: relative; top: -10px !important; left: 310px !important; } #ca-nstab-special { font-weight: bold; color: #ff7f27; position: relative; top: -10px !important; left: 600px !important; } #ca-nstab-main { font-weight: bold; visibility: visible; color: #ff7f27; position: relative; top: 20px !important; left: 700px !important; } /*media query personal links*/ li#pt-mycontris { visibility: visible; position: relative; top: 250px !important; left: 140px !important; z-index: 300; } li#pt-watchlist { visibility: visible; visibility: visible; position: relative; top: 250px !important; left: 380px !important; z-index: 300; } li#pt-preferences { visibility: visible; position: relative; top: 220px !important; left: 390px !important; z-index: 300; } li#pt-mytalk { visibility: visible; position: relative; top: 225px !important; left: 600px !important; z-index: 300; } li#pt-logout { position: relative; top: 280px !important; left: 130px !important; z-index: 1; background: transparent; } } /*this portrait smartphone mode. don't use !important tag. stops working*/ @media screen , (max-width: 350px) { #border-search { position: absolute; top: 50% !important; left: 25% !important; display: none; } #searchform { position: relative !important; left: -70% !important; top: 30% !important; } .rectangle-box { position: relative !important; width: 80% !important; height: 12% !important; left: 10% !important; top: -10% !important; } .rectangle-box2 { position: absolute !important; width: 80% !important; height: 50% !important; left: 10% !important; top: 12% !important; } #column-content { position: relative !important; display: block; width: 90% !important; margin: 1% !important; left: -4% !important; top: 30% !important; } #p-cactions { z-index: 1; display: none; position: absolute; top: 40%; left: 410px; } #button { display: block !important; position: relative !important; top: -20% !important; left: 10% !important; z-index: 200 !important; } #p-personal { display: none; position: relative; top: 280px; left: 130px; z-index: 1; background: transparent; } /*media query edit links appear when logged in*/ #ca-move { font-weight: bold; position: relative; top: 40px !important; left: 500px !important; background: transparent; } #ca-delete { font-weight: bold; position: relative; color: #ff7f27; top: -15px !important; left: 400px !important; text-indent:0; display:block; background: transparent; } #ca-watch { font-weight: bold; position: relative; color: #ff7f27; background: transparent; top: 35px !important; left: 590px !important; text-indent:0; } #ca-edit { font-weight: bold; position: relative; top: 15px !important; left: 510px !important; } #ca-protect { font-weight: bold; position: relative; top: 20px !important; left: 415px !important; background: transparent; } #ca-unwatch { font-weight: bold; position: relative; top: 40px !important; left: 570px !important; background: transparent; } /*media query edit links appear when logged in , logged out*/ #ca-history { font-weight: bold; position: absolute; top: -10px !important; left: 590px !important; } #ca-talk { font-weight: bold; color: #ff7f27; position: relative; top: -10px !important; left: 310px !important; } #ca-nstab-special { font-weight: bold; color: #ff7f27; position: relative; top: -10px !important; left: 600px !important; } #ca-nstab-main { font-weight: bold; display: block; color: #ff7f27; position: relative !important; top: 20px !important; left: 100px; } /*media query personal links*/ li#pt-mycontris { visibility: visible; position: relative; top: 250px !important; left: 140px !important; z-index: 300; } li#pt-watchlist { visibility: visible; visibility: visible; position: relative; top: 250px !important; left: 380px !important; z-index: 300; } li#pt-preferences { visibility: visible; position: relative; top: 220px !important; left: 390px !important; z-index: 300; } li#pt-mytalk { visibility: visible; position: relative; top: 225px !important; left: 600px !important; z-index: 300; } li#pt-logout { position: relative; top: 280px !important; left: 130px !important; z-index: 1; background: transparent; } /*navigation links*/ #n-home { position: absolute !important; top: 10% !important; left: 10% !important; z-index: 1; background: transparent; } #n-sign-up { position: absolute !important; top: 18% !important; left: 10% !important; z-index: 1; background: transparent; } } /*smartphone 4 4.5*/ @media screen , (min-width: 400px) { #border-search { position: absolute; top: 50% !important; left: 25% !important; display: none; } #searchform { position: relative !important; left: -70% !important; top: 30% !important; } .rectangle-box { position: relative !important; width: 80% !important; height: 12% !important; left: 10% !important; top: -10% !important; } .rectangle-box2 { position: absolute !important; width: 80% !important; height: 50% !important; left: 10% !important; top: 12% !important; } #column-content { position: relative !important; display: block; width: 90% !important; margin: 1% !important; left: -4% !important; top: 30% !important; } #p-cactions { z-index: 1; display: none; position: absolute; top: 40%; left: 410px; } #button { display: block !important; position: relative !important; top: -20% !important; left: 10% !important; z-index: 200 !important; } #p-personal { display: none; position: relative; top: 280px; left: 130px; z-index: 1; background: transparent; } /*media query edit links appear when logged in*/ #ca-move { font-weight: bold; position: relative; top: 40px !important; left: 500px !important; background: transparent; } #ca-delete { font-weight: bold; position: relative; color: #ff7f27; top: -15px !important; left: 400px !important; text-indent:0; display:block; background: transparent; } #ca-watch { font-weight: bold; position: relative; color: #ff7f27; background: transparent; top: 35px !important; left: 590px !important; text-indent:0; } #ca-edit { font-weight: bold; position: relative; top: 15px !important; left: 510px !important; } #ca-protect { font-weight: bold; position: relative; top: 20px !important; left: 415px !important; background: transparent; } #ca-unwatch { font-weight: bold; position: relative; top: 40px !important; left: 570px !important; background: transparent; } /*media query edit links appear when logged in , logged out*/ #ca-history { font-weight: bold; position: absolute; top: -10px !important; left: 590px !important; } #ca-talk { font-weight: bold; color: #ff7f27; position: relative; top: -10px !important; left: 310px !important; } #ca-nstab-special { font-weight: bold; color: #ff7f27; position: relative; top: -10px !important; left: 600px !important; } #ca-nstab-main { font-weight: bold; display: block; color: #ff7f27; position: relative !important; top: 20px !important; left: 100px; } /*media query personal links*/ li#pt-mycontris { visibility: visible; position: relative; top: 250px !important; left: 140px !important; z-index: 300; } li#pt-watchlist { visibility: visible; position: relative; top: 250px !important; left: 380px !important; z-index: 300; } li#pt-preferences { visibility: visible; position: relative; top: 220px !important; left: 390px !important; z-index: 300; } li#pt-mytalk { visibility: visible; position: relative; top: 225px !important; left: 600px !important; z-index: 300; } li#pt-logout { position: relative; top: 280px !important; left: 130px !important; z-index: 1; background: transparent; } /*navigation links*/ #n-home { position: absolute !important; top: 10% !important; left: 10% !important; z-index: 1; background: transparent; } #n-sign-up { position: absolute !important; top: 18% !important; left: 10% !important; z-index: 1; background: transparent; } /*smartphone landscape mode*/ } /*media queries end here*/ my media queries show same layout every query. there supposed change. tested them before , working stopped working. here code media queries. tested them on mobile, latop , layout looked same. why happening?
Comments
Post a Comment