Responsive html the tablet resolution css messes up the desktop resolution css -
i'm making responsive demo website , i'm having trouble medium resolution when put css in style sheet high res no longer works. know why is/ how fix it? code below:
@charset "utf-8"; /* css document */ /* low res or phone */ @media screen , (max-width: 480px) { .loginstuff li { display: inline; float: right!important; position:relative; top: -50px; right: 10px; } .reg1 { border-radius: 0px 3px 3px 0px; border-left-width: 1px; border-left-style:solid; border-left-color:#ce542c; padding: 5px 5px; font-size:15px; font-family:arial; font-weight:bold; color: #fff; background-color:#f7cf1c; text-decoration:none; } .log1 { border-radius: 3px 0px 0px 3px; border-right-width: 0.5px; border-right-style:solid; border-right-color:#ce542c; padding: 5px 12px; font-size:15px; font-family:arial; font-weight:bold; color: #fff; background-color:#f7cf1c; text-decoration:none; } .nav { visibility: hidden; } /*start menu*/ .clearfix { background-color:#f7cf1c; margin-right:auto; margin-left:auto; width:277px; height:30px; position:relative; left: -34px; } .amenu { margin-right:auto; margin-left:auto; padding-left: 100px; position:relative; left:35px; } .menu-wrap { width:100%; background-color:#f7cf1c; align-content:center; margin-right:auto; margin-left:auto; } .menu { width:100%; height:40px; background-color:#f7cf1c; position:relative; margin-left:auto; margin-right:auto; } .menu li { margin:0px; text-decoration:none; list-style:none; font-family:"alfa slab one"; margin-right:auto; margin-left:auto; } .menu { transition:all linear 0.15s; text-decoration:none; color:#fff; margin-right:auto; margin-left:auto; } .menu .arrow { font-size:11px; line-height:0%; } /*----- top level -----*/ .menu > ul > li { display:inline-block; position:relative; font-size:19px; } .menu > ul > li > { padding:10px 40px; display:inline-block; } /*----- bottom level -----*/ .menu li:hover .sub-menu { z-index:1; opacity:1; } .menu li:active .sub-menu { z-index:1; opacity:1; } .sub-menu { width:160%; padding:5px 0px; position:absolute; top:100%; left:0px; z-index:-1; opacity:0; transition:opacity linear 0.15s; background:#f7cf1c; } .sub-menu li { display:block; font-size:16px; } .sub-menu li { padding:10px 30px; display:block; } /*finish menu*/ .topnav { margin-bottom: 10px; } .mobistrip { width: 200px; height: 200px; margin-right:auto; margin-left:auto; background-color:#f7cf1c; position:relative; left: 0px; } .createyearbook { position:relative; left:0px; margin-right:auto; margin-left:auto; padding-bottom:20px; width:350px; height:50px; font-family:"alfa slab one"; font-size: 15px; font-weight:lighter; text-align:center } .createyearbook { color: #000; text-decoration:none; background-color:#ce542c; padding: 5px 15px; border-radius: 3px 3px 3px 3px; } .continue { position:relative; left:0px; margin-right:auto; margin-left:auto; width:340px; height:50px; text-align:center; } .continue { font-size:24px; font-family:arial; font-weight:bolder; color: #fff; background-color:#ce542c; text-decoration:none; padding: 10px 10px; border-radius: 3px 3px 3px 3px; } .undernav li { position:relative; top: -150px; display:inline; height: 50px; } .ach { width:450px; height:50px; padding-top:20px; padding-bottom:20px; position:relative; left:0px; top: 140px; } .ach { font-family:arial; font-size:25px; color:#4e4d4d; font-weight:bold; text-decoration:none; padding-right: 25px; padding-left: 25px; padding-bottom:20px; border-bottom-width:8px; border-bottom-color:#4e4d4d; border-bottom-style:solid; } .jumbotron { visibility: hidden; padding: 0px; } /*choose size stuff*/ .choosesizea2 { width:237px; font-family:arial; font-size:15px; color:#4e4d4d; font-weight:bold; background-color:#fff; position:relative; top:-900px; margin-right:auto; margin-left:auto; } .choosesize { align-content:center; background-color:#fff; } .picksize { position:relative; top:-900px; left: -15; margin-right:auto; margin-left:auto; } .sizepics img { background-color:#fff; border-width:6px; border-color:#f7cf1c; border-style:solid; margin-right:auto; margin-left:auto } } /* med res or ipad */ @media screen , (min-width: 481px) { .nav { visibility:hidden; } .loginstuff li { display: inline; float: right!important; position:relative; top: -50px; right: 10px; } .reg1 { border-radius: 0px 3px 3px 0px; border-left-width: 1px; border-left-style:solid; border-left-color:#ce542c; padding: 10px 10px; font-size:20px; font-family:arial; font-weight:bold; color: #fff; background-color:#f7cf1c; text-decoration:none; } .log1 { border-radius: 3px 0px 0px 3px; border-right-width: 0.5px; border-right-style:solid; border-right-color:#ce542c; padding: 10px 20px; font-size:20px; font-family:arial; font-weight:bold; color: #fff; background-color:#f7cf1c; text-decoration:none; } .nav { visibility: hidden; } /*start menu*/ .clearfix { background-color:#f7cf1c; margin-right:auto; margin-left:auto; width:300px; height:20px; padding-bottom:10px; position:relative; left: -30px; } .amenu { margin-right:auto; margin-left:auto; padding-left: 100px; position:relative; left:40px; } .menu-wrap { width:100%; background-color:#f7cf1c; align-content:center; margin-right:auto; margin-left:auto; } .menu { width:100%; height:68px; background-color:#f7cf1c; position:relative; margin-left:auto; margin-right:auto; } .menu li { margin:0px; text-decoration:none; list-style:none; font-family:"alfa slab one"; margin-right:auto; margin-left:auto; position:relative; top: 15px; } .menu { transition:all linear 0.15s; text-decoration:none; color:#fff; margin-right:auto; margin-left:auto; } .menu .arrow { font-size:24px; line-height:0%; } /*----- top level -----*/ .menu > ul > li { display:inline-block; position:relative; font-size:24px; } .menu > ul > li > { padding:0px 20px; display:inline-block; } /*----- bottom level -----*/ .menu li:hover .sub-menu { z-index:1; opacity:1; } .menu li:active .sub-menu { z-index:1; opacity:1; } .sub-menu { width:500px; height:300px; padding:0px 0px; padding-bottom:60px; padding-top:20px; padding-left:35px; position:absolute; top:100%; left:-100px; z-index:-1; opacity:0; transition:opacity linear 0.15s; background:#f7cf1c; border-radius: 0px 0px 3px 3px; } .sub-menu li { display:block; font-size:25px; } .sub-menu li { padding:20px 20px; display:block; } /*finish menu*/ .topnav { margin-bottom: 10px; } .createyearbook { position:relative; left:-10px; bottom:90px; margin-right:auto; float:left; padding-bottom:50px; width:500px; height:70px; font-family:"alfa slab one"; font-size: 14px; font-weight:lighter; text-align:center } .createyearbook h1 { width:380px; } .createyearbook { color: #000; text-decoration:none; background-color:#ce542c; padding: 15px 30px; border-radius: 3px 3px 3px 3px; } .continue { position:relative; right:-10px; bottom: 209px; float:right; margin-left:auto; width:400px; height:70px; text-align:center; } .continue { font-size:28px; font-family:arial; font-weight:bolder; color: #fff; background-color:#ce542c; text-decoration:none; padding: 17.4px 10px; border-radius: 3px 3px 3px 3px; } .undernav li { position:relative; top: -300px; display:inline; height: 50px; } .ach { width:600px; height:50px; padding-top:20px; padding-bottom:20px; position:relative; left:-10px; top: 140px; margin-right:auto; margin-left:auto; } .ach { font-family:arial; font-size:32px; color:#4e4d4d; font-weight:bold; text-decoration:none; padding-right: 25px; padding-left: 25px; padding-bottom:20px; border-bottom-width:8px; border-bottom-color:#4e4d4d; border-bottom-style:solid; margin-right:10px; margin-left:10px; } .circlest { visibility:hidden; } .jumbotron { padding-top: 20px; background-image:url(http://yourprintsolution.co.uk/littlechickdemo/pics/pic_1.gif); height: 200px; background-repeat: no-repeat; background-size: cover; position:relative; top: 10px; } .jumbotron .container { position: relative; background-color:transparent; } .jumbotron h1 { color: #fff; font-size: 20px; font-family:"alfa slab one"; text-outline:#dfdfdf; background-color:transparent; padding-left:140px; position:relative; bottom:50px; display: inline; float: left!important; margin-right: auto; } /*choose size stuff*/ .choosesizea2 { width:237px; font-family:arial; font-size:15px; color:#4e4d4d; font-weight:bold; background-color:#fff; position:relative; top:-0px; margin-right:auto; margin-left:auto; } .choosesize { align-content:center; background-color:#fff; } .picksize { position:relative; top:0px; left: -15; margin-right:auto; margin-left:auto; } .sizepics img { background-color:#fff; border-width:6px; border-color:#f7cf1c; border-style:solid; margin-right:auto; margin-left:auto } } /* high res or computer */ @media screen , (min-width: 1024px) { .menu-wrap { visibility: hidden; } .bg { background-color:#fff; } .filler { width: 100%; height: 200px; background-color:#f7cf1c; } .fillera { padding-top:30px; background-color:#fff; } * { background-color:#eae9e9; } .loginstuff li { display: inline; float: right!important; position:relative; top: 140px; } .reg1 { border-radius: 0px 3px 3px 0px; border-left-width: 1px; border-left-style:solid; border-left-color:#ce542c; padding: 14px 10px; font-size:18px; font-family:arial; font-weight:bold; color: #fff; background-color:#f7cf1c; text-decoration:none; transition-property: background; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0; } .reg1 a:hover { border-radius: 0px 3px 3px 0px; border-left-width: 1px; border-left-style:solid; border-left-color:#ce542c; padding: 14px 10px; font-size:18px; font-family:arial; font-weight:bold; color: #000; background-color:#ce542c; text-decoration:none; } .log1 { border-radius: 3px 0px 0px 3px; border-right-width: 1px; border-right-style:solid; border-right-color:#ce542c; padding: 14px 20px; font-size:18px; font-family:arial; font-weight:bold; color: #fff; background-color:#f7cf1c; text-decoration:none; transition-property: background; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0; } .log1 a:hover { border-radius: 3px 0px 0px 3px; border-right-width: 1px; border-right-style:solid; border-right-color:#ce542c; padding: 14px 20px; font-size:18px; font-family:arial; font-weight:bold; color: #000; background-color:#ce542c; text-decoration:none; } .list { padding-top:200px; } .nav{ padding-top:200px; } .nav ul { padding-left: 0; } .nav { padding: 30px 20px; font-size:22px; font-family:"alfa slab one"; color: #fff; background-color:#f7cf1c; text-decoration:none; float: left!important; margin-right: auto; transition-property: background; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0; } .nav a:hover { padding: 30px 20px; font-size:22px; font-family:"alfa slab one"; color: #000; background-color:#ce542c; text-decoration:none; float: left!important; margin-right: auto; } .nav li { display: inline; float: left!important; margin-right: auto; } .hide { visibility: hidden; } .createyearbook { padding-top:50px; width:330px; height:70px; font-family:"alfa slab one"; font-size:14px; font-weight:lighter; float:left; text-align:left; } .createyearbook { color:#f7cf1c; padding: 10px 10px; border-radius: 3px 3px 3px 3px; transition-property: background; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0; text-decoration:none; } .createyearbook a:hover { color: #fff; background-color:#f7cf1c; padding: 10px 10px; border-radius: 3px 3px 3px 3px; } .undernav li { display:inline; padding: 15px 20px; height: 70px; } .ach { width:500px; height:70px; float:right; padding-top:50px; padding-bottom:0px; } .ach { font-family:arial; font-size:24px; color:#4e4d4d; font-weight:bold; text-decoration:none; padding: 28px 10px; border-bottom-width:8px; border-bottom-color:#eae9e9; border-bottom-style:solid; transition-property:all; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0; } .ach a:hover { font-family:arial; font-size:24px; color:#4e4d4d; font-weight:bold; text-decoration:none; padding: 28px 10px; border-bottom-width:8px; border-bottom-color:#4e4d4d; border-bottom-style:solid; } .continue { width:340px; height:70px; float:right!important; padding-top:50px; text-align:right; } .continue { font-size:24px; font-family:arial; font-weight:bolder; color: #fff; background-color:#f7cf1c; text-decoration:none; padding: 14px 10px; border-radius: 3px 3px 3px 3px; transition-property: background; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0; } .continue a:hover { font-size:24px; font-family:arial; font-weight:bolder; color: #000; background-color:#ce542c; text-decoration:none; padding: 14px 10px; border-radius: 3px 3px 3px 3px; } .pic img { padding-top: 8px; background-color:transparent; } .jumbotron { padding-top: 20px; background-image:url(http://yourprintsolution.co.uk/littlechickdemo/pics/pic_1.gif); height: 500px; background-repeat: no-repeat; background-size: cover; position:relative; top: 130px; } .jumbotron .container { position: relative; background-color:transparent; } .jumbotron h1 { color: #fff; font-size: 44px; font-family:"alfa slab one"; background-color:transparent; padding-left:380px; display: inline; float: left!important; margin-right: auto; } .circlest { padding-top:400px; background-color:transparent!important; padding-left:80px; padding-right:80px; } .circlest { background-color:#fff; }* { background-color:#eae9e9; } .thumbnail{ max-width: 360px; margin-right: auto; display:inline; float: left!important; } .list { padding-top:200px; } .a1 { width:25%; display:inline; padding-left:6%; padding-right:6%; background-color:#fff; } .a1 img { background-color:transparent!important; } .mobibg { height:91px; width:100%; background-color:#f7cf1c; } /*teacher login stuff*/ .pagelogin { padding-top:20px; padding-bottom:20px; padding-left:300px; } .tlogin form { background-color:#fff; } .tlogin p { background-color:#fff; } .tlogin { background-color:#fff; width:400px; padding: 20px; } /*choose size stuff*/ .choosesize { padding-top:220px; align-content:center; background-color:#fff; } .choosesize h1 { background-color:#fff; } .choosesizea2 { width:500px; font-family:arial; font-size:27px; color:#4e4d4d; font-weight:bold; background-color:#fff; } .picksize { width:100%; background-color:#fff; } .sizepics { width:30%; display:inline; padding: 10px; background-color:#fff; } .sizepics { background-color:#fff; border-width:6px; border-color:#fff; border-style:solid; } .sizepics img { background-color:#fff; border-width:13px; border-color:#fff; border-style:solid; transition-property:all; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0; } .sizepics img:hover { background-color:#fff; border-width:13px; border-color:#f7cf1c; border-style:solid; } /*year group yg*/ .chooseyg { padding-top:220px; align-content:center; background-color:#fff; } .chooseyg h1 { background-color:#fff; } .chooseyga2 { width:800px; font-family:arial; font-size:27px; color:#4e4d4d; font-weight:bold; background-color:#fff; } /*choose cover 8x8 stuff*/ .choosecover8x8 { padding-top:220px; align-content:center; background-color:#fff; } .choosecover8x8 h1 { background-color:#fff; } .a2-8x8 { width:500px; font-family:arial; font-size:27px; color:#4e4d4d; font-weight:bold; background-color:#fff; } .pickcover8x8 { width:100%; background-color:#fff; } .cover8x8pics { width:30%; display:inline; padding: 10px; background-color:#fff; } .cover8x8pics { background-color:#fff; border-width:6px; border-color:#fff; border-style:solid; } .cover8x8pics img { background-color:#fff; border-width:13px; border-color:#fff; border-style:solid; transition-property:all; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0; } .cover8x8pics img:hover { background-color:#fff; border-width:13px; border-color:#f7cf1c; border-style:solid; } /*choose cover 6x8 stuff*/ .choosecover6x8 { padding-top:220px; align-content:center; background-color:#fff; } .choosecover6x8 h1 { background-color:#fff; } .a2-6x8 { width:500px; font-family:arial; font-size:27px; color:#4e4d4d; font-weight:bold; background-color:#fff; } .pickcover6x8 { width:100%; background-color:#fff; } .cover6x8pics { width:30%; display:inline; padding: 10px; background-color:#fff; } .cover6x8pics { background-color:#fff; border-width:6px; border-color:#fff; border-style:solid; } .cover6x8pics img { background-color:#fff; border-width:13px; border-color:#fff; border-style:solid; transition-property:all; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0; } .cover6x8pics img:hover { background-color:#fff; border-width:13px; border-color:#f7cf1c; border-style:solid; } /*build yearbook stuff*/ .buildyearbook { padding-top:220px; align-content:center; background-color:#fff; } .buildyearbook h1 { background-color:#fff; } .buildyearbooka2 { width:800px; font-family:arial; font-size:27px; color:#4e4d4d; font-weight:bold; background-color:#fff; } .price { font-family: arial; font-size:32px; color:#e15152; font-weight:bold; background-color:#fff; padding: 20px; } .buildbutton { padding: 25px; background-color:#fff; } .buildbutton { font-size:30px; font-family:"alfa slab one"; color: #fff; text-decoration:none; background-color:#f7cf1c; text-decoration:none; border-radius: 3px 3px 3px 3px; padding: 25px 50px; transition-property: background; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0; } .buildbutton a:hover { font-size:30px; font-family:"alfa slab one"; color: #000; background-color:#ce542c; text-decoration:none; text-decoration:none; border-radius: 3px 3px 3px 3px; padding: 25px 50px; } .info { font-family:arial; font-size:24px; color:#4e4d4d; font-weight:bold; background-color:#fff; padding:30px; } }<!doctype html> <html> <head> <meta charset="utf-8"> <title>yearbooks - size</title> <link rel="stylesheet" type="text/css" media="all" href="styles1.css"> </head> <body> <div class="top"> <div class="thumbnail"> <img src="http://yourprintsolution.co.uk/littlechickdemo/pics/logo-01.png" width="177" height="183" alt="0"> </div> <div class="loginstuff"> <ul> <div class="reg1"><li class="reg"><a href="#">register</a></li></div> <div class="log1"><li class="login"><a href="#">login</a></li></div> </ul> </div> </div> <!-- mobile menu --> <div class="menu-wrap" align="center"> <nav class="menu" align="center"> <ul class="clearfix"> <li> <div class="amenu" align="center"><a href="#" >menu<span class="arrow">▼</span></a></div> <ul class="sub-menu"> <li><a href="#">yearbooks</a></li> <li><a href="#">leaving cards</a></li> <li><a href="#">mugs</a></li> <li><a href="#">school calendars</a></li> <li><a href="#">teachers section</a></li> </ul> </li> </ul> </nav> </div> <!-- normal menu --> <div class="nav" style="height:100%; width:100%;"> <ul> <div class="yearbooks"><li><a href="#">yearbooks</a></li></div> <div class="leavingcards"><li><a href="#">leaving cards</a></li></div> <div class="mugs"><li><a href="#">mugs</a></li></div> <div class="schoolcalendars"><li><a href="#">school calendars</a></li></div> <div class="teachersection"><li><a href="#">teachers section</a></li></div> </ul> </div> <div class="mobibg"></div> <div class="undernav"> <div class="createyearbook"> <h1><a href="#">create yearbook</a></h1> </div> <div class="continue"> <!-- same login/register bold --> <h2><a href="#">continue yearbook</a></h2> </div> <div class="ach" align="center"> <ul> <li><a href="#">about</a></li> <li><a href="#">create</a></li> <li><a href="#">how to</a></li> </ul> </div> </div> <div class="jumbotron"> <div class="container"> <h1>creating yearbook easy <br><br> choose options below. </h1> </div> <div class="circlest" style="background-color:#fff;"> <div class="a1"> <a href="#"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/></a> </div> <div class="a1"> <a href="#"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/></a> </div> <div class="a1"> <a href="#"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/></a> </div> <div class="a1"> <a href="#"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/></a> </div> </div> </div> <div class="bg"> <div class="choosesize" align="center"> <div class="choosesizea2"> <h1 align="center">1. choose size</h1> </div> </div> <div class="picksize" align="center"> <div class="sizepics" align="center"> <a href="#" align="center"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/8x6.gif" alt="" width="30%" height="30%"></a> </div> <div class="sizepics" align="center"> <a href="#" align="center"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/11x8.gif" alt="" width="30%" height="30%"></a> </div> <div class="sizepics" align="center"> <a href="#" align="center"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/8x8.gif" alt="" width="30%" height="30%"></a> </div> </div> <div class="fillera"><div class="filler"></div></div> </div> </body> </html>
that's because of :
/* med res or ipad */ @media screen , (min-width: 481px) { your media query use min-width. every screen higher resolution take css rules in too. add max-width rule :
/* med res or ipad */ @media screen , (min-width: 481px) , (max-width: 1023px) {
Comments
Post a Comment