i developing webpage,in screen fit mobile also.
style.css
/* general stuff */ * { margin: 0; padding: 0; } body { width: 100%; font-family: 'cabin', sans-serif; } /*.clear { clear: both; }*/ .clear:after { display: block; clear: both; visibility: hidden; content: ""; height: 0; } /* header block */ .header-background { padding-top: 50px; } .header-background > div:first-child { width: 100%; background: #232323; } .header { background: #232323; color: #b2b2b2; width: 80%; margin: auto; } .header { text-decoration: none; color: white; } .header a:active { color: #19a3a3; } #nav { position: relative; display: block; height: 55px; line-height: 55px; width: 100%; max-width: none; margin: 0; background: #333; z-index: 1; border-bottom: 1px solid #666; font-weight: 600; font-family: helvetica, arial, sans-serif; font-size: 14px; } #nav, #nav * { -webkit-box-sizing: border-box; /* safari/chrome, other webkit */ -moz-box-sizing: border-box; /* firefox, other gecko */ box-sizing: border-box; /* opera/ie 8+ */ } .nav-item { color: #fff; text-transform: uppercase; text-decoration: none; } /* desktop */ #desktop-nav .nav-item { display: block; padding: 0 20px; float: right; -webkit-transition: color 200ms linear; -moz-transition: color 200ms linear; -ms-transition: color 200ms linear; -o-transition: color 200ms linear; transition: color 200ms linear; } #desktop-nav .nav-item:hover, #desktop-nav .nav-item:active { opacity: 0.7; } /* mobile */ #mobile-nav { position: absolute; top: 55px; right: 0; left: 0; opacity: 0; visibility: hidden; -webkit-transition: visibility 0ms linear 200ms, opacity 200ms linear; -moz-transition: visibility 0ms linear 200ms, opacity 200ms linear; -ms-transition: visibility 0ms linear 200ms, opacity 200ms linear; -o-transition: visibility 0ms linear 200ms, opacity 200ms linear; transition: visibility 0ms linear 200ms, opacity 200ms linear; } #mobile-nav .nav-item { display: block; width: 100%; padding-left: 30px; background: #333; border-bottom: 1px solid #666; opacity: 0; -webkit-transition: background 200ms linear, color 200ms linear; -moz-transition: background 200ms linear, color 200ms linear; -ms-transition: background 200ms linear, color 200ms linear; -o-transition: background 200ms linear, color 200ms linear; transition: background 200ms linear, color 200ms linear; } #mobile-nav .nav-item:hover, #mobile-nav .nav-item:active { background: #666; color: white; } #mobile-nav .nav-item:last-child { border-bottom: none; } /* toggles */ .nav-toggle { position: absolute; left: -100px; right: 0; line-height: 0px; border: none; cursor: pointer; height: 22px; width: 22px; margin: 16px 22px; background-position: center; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-image: url('../images/menu-icon.svg'); background-color: #333; } .nav-toggle:hover { opacity: 0.7; } #open-toggle:focus { left: -100px; } #open-toggle:focus ~ #close-toggle { left: auto; } #open-toggle:focus ~ #mobile-nav { visibility: visible; opacity: 1; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } #open-toggle:focus ~ #mobile-nav .nav-item { opacity: 1; /* avoid initial fade in of content, have use opacity because using visibility breaks functionality */ } /* logo */ #logo { position: absolute; padding: 0 20px; font-size: 21px; font-weight: bold; cursor: pointer; color: #fff } #logo:hover { opacity: 0.7; } .header-logo { font-family: 'indie flower', cursive; font-size: 36px; padding: 8px; float: left; } .header-notes { padding: 100px 0; width: 100%; color: white; } .header-notes div { margin: auto; width: 50%; text-align: center; font-size: 40px; } span.green { color: #19a3a3; } /* page main content */ .content { text-align: center; padding-top: 50px; } .content h2 { color: #19a3a3; padding: 25px; } .content p { padding: 25px 15%; } .hr-background { background: url(../img/hr-bg.png); width: 229px; height: 14px; margin: auto; } .photos { margin: auto; margin-top: 30px; margin-bottom: 40px; display: inline-block; width: 70%; } .photos ul li { float: left; list-style: none; padding: 1%; width: 23%; } .photos ul li img { width: 100%; } .photos ul li:hover h3 { color: #19a3a3; } .photos { text-decoration: none; color: black; } .photos h3 { padding: 15px 0; font-size: 16px; } .photos p { font-size: 13px; padding: 0; } .slider { display: block; margin: auto; margin-bottom: 30px; width: 60px; } .slider ul { height: 8px; } .slider ul li { float: left; list-style: none; background: url(../img/slide_point_bg.png) no-repeat; width: 8px; height: 8px; margin-left: 5px; border-radius: 100%; } .slider ul li.active { background: url(../img/slide_point_active_bg.png) no-repeat; } .slider ul li:hover { box-shadow: 0 0 0.5em black; } /* footer */ .footer { background: #062134; color: white; display: table; font-size: 14px; } .footer .column-title { margin-bottom: 30px; font-weight: bold; } .footer > div { display: table-row; } .footer > div > div { display: table-cell; width: 23%; padding-top: 50px; padding-bottom: 50px; } .footer > div > div:first-child { padding-left: 5%; padding-right: 1%; } .footer > div > div:nth-child(2) { padding-left: 1%; padding-right: 1%; } .footer > div > div:nth-child(3) { padding-left: 1%; padding-right: 20%; } .footer p { line-height: 200%; } .footer input { display: block; float: left; background: #062134; /*border: 2px solid white;*/ border-top: 2px solid white; border-right: 0; border-bottom: 2px solid white; border-left: 2px solid white; border-top-left-radius: 5px; border-bottom-left-radius: 5px; /*padding: 10px;*/ width: 75%; color: white; height: 36px; text-indent: 10px; } ::-webkit-input-placeholder { color: #1f3748; } :-moz-placeholder { /* firefox 18- */ color: #1f3748; } ::-moz-placeholder { /* firefox 19+ */ color: #1f3748; } :-ms-input-placeholder { color: #1f3748; } .footer button { float: left; background: #062134 url(../img/arrow-input-bg.png) 10px 10px no-repeat; height: 40px; width: 40px; height: 40px; border-top: 2px solid white; border-right: 2px solid white; border-bottom: 2px solid white; border-left: 0; border-left: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; margin-bottom: 30px; } /*.row-2 p { clear: left; }*/ .footer input:focus { outline: 0; background: #4d7ec9; } .footer input:hover { box-shadow: 0 0 0.5em white; } .footer button:hover { background-color: blue; } .footer button:focus { outline: 0; } .list-of-resources { display: table; } .list-of-resources > div { display: table-row; } .list-of-resources > div > div { display: table-cell; padding: 5px 0; } .list-of-resources > div > div:last-child { padding: 0 0 0 30px; } .list-of-resources { text-decoration: none; color: white; } .list-of-resources a:hover { color: tomato; } @media screen , (max-width:1000px) { /* header */ .header-background { /* height: 300px;*/ padding-top: 0; } .header-notes { padding: 50px 0; } .header-notes > div { width: 70%; font-size: 35px; } .header-background > div:first-child { top: 0; } .header { background: #232323; color: #b2b2b2; width: 100%; margin: auto; } .header-logo { font-family: 'indie flower', cursive; font-size: 36px; padding-left: 30px; float: left; } /* nav { float: initial; clear: both; } nav ul { list-style: none; padding: 15px; } nav ul li { display: inline; padding: 15px; } */ /* content */ .photos { width: 90%; } } @media screen , (max-width:900px) { .footer > div > div { display: table-cell; width: 28%; padding-top: 50px; } .footer > div > div:first-child { padding-left: 5%; padding-right: 1%; } .footer > div > div:nth-child(2) { padding-left: 1%; padding-right: 1%; } .footer > div > div:nth-child(3) { padding-left: 1%; padding-right: 5%; } } @media screen , (max-width:700px) { .footer > div > div { display: block; float: left; width: 42%; } .footer > div > div:last-child { clear: both; padding-left: 5%; padding-top: 10px; } #desktop-nav { display: none; } #open-toggle { left: auto; } } @media screen , (max-width:600px) { .photos ul li { padding: 5%; width: 40%; } .photos ul li:nth-child(3n+3) { clear: left; } .photos h3 { padding: 15px 0; font-size: 18px; } .photos p { font-size: 16px; padding: 0; } .footer > div > div { width: 90%; } .footer > div > div:nth-child(2) { clear: both; padding-left: 5%; padding-top: 10px; } } @media screen , (max-width:480px) { .header-logo { font-size: 26px; padding: 8px; } .header-notes > div { width: 80%; font-size: 26px; } nav ul { list-style: none; padding: 5px; } nav ul li { display: inline; padding: 5px; } } html
<body> <div class="header-background"> <!-- <div> --> <div id="nav"> <div id="logo">site title</div> <nav id="desktop-nav"> <a class="nav-item" href="#1">github</a> <a class="nav-item" href="#2">about</a> <a class="nav-item" href="#3">community</a> <a class="nav-item" href="#4">docs</a> </nav> <input id="open-toggle" class="nav-toggle" type="text" readonly> <input id="close-toggle" class="nav-toggle" type="text" readonly> <nav id="mobile-nav"> <a class="nav-item" href="#4">docs</a> <a class="nav-item" href="#3">community</a> <a class="nav-item" href="#2">about</a> <a class="nav-item" href="#1">github</a> </nav> </div> <!-- </div> --> <!-- <div class="header-notes"> <div><span class="green">/creative</span> 1 page template</div> </div> --> </div> and js field is:--
(function(adiachenko) { window.addeventlistener("load", function() { var stufflist = document.queryselectorall("#stuff-list li"); if (stufflist.length % 4 === 1) { var view = window.innerwidth; if (view > 600) { [].foreach.call(stufflist, function(stuffmember) { // whatever stuffmember.style.width = "18%"; }); } window.onresize = function() { view = window.innerwidth; changepicturesize(view, stufflist); }; } function changepicturesize(view, stufflist) { if (view > 600) { [].foreach.call(stufflist, function(stuffmember) { // whatever stuffmember.style.width = "18%"; }); } else { [].foreach.call(stufflist, function(stuffmember) { // whatever stuffmember.style.width = null; }); } } }, false); }(window.adiachenko = window.adiachenko || {})); now getting page like:-
but want navigation :-
and navigation needs sized body of page..
navigation.css
#nav { position:relative; width:620px; margin:0 auto; } ul#navigation { margin:0px auto; position:relative; float:left; border-left:1px solid #c4dbe7; border-right:1px solid #c4dbe7; } ul#navigation li { display:inline; font-size:12px; font-weight:bold; margin:0; padding:0; float:left; position:relative; border-top:1px solid #c4dbe7; border-bottom:2px solid #c4dbe7; } ul#navigation li { padding:10px 25px; color:#616161; text-shadow:1px 1px 0px #fff; text-decoration:none; display:inline-block; border-right:1px solid #fff; border-left:1px solid #c2c2c2; border-top:1px solid #fff; background: #f5f5f5; -webkit-transition:color 0.2s linear, background 0.2s linear; -moz-transition:color 0.2s linear, background 0.2s linear; -o-transition:color 0.2s linear, background 0.2s linear; transition:color 0.2s linear, background 0.2s linear; } ul#navigation li a:hover { background:#f8f8f8; color:#282828; } ul#navigation li:hover > { background:#fff; } /* drop-down navigation */ ul#navigation li:hover > ul { visibility:visible; opacity:1; } ul#navigation ul, ul#navigation ul li ul { list-style: none; margin: 0; padding: 0; visibility:hidden; position: absolute; z-index: 99999; width:180px; background:#f8f8f8; box-shadow:1px 1px 3px #ccc; opacity:0; -webkit-transition:opacity 0.2s linear, visibility 0.2s linear; -moz-transition:opacity 0.2s linear, visibility 0.2s linear; -o-transition:opacity 0.2s linear, visibility 0.2s linear; transition:opacity 0.2s linear, visibility 0.2s linear; } ul#navigation ul { top: 43px; left: 1px; } ul#navigation ul li ul { top: 0; left: 181px; } ul#navigation ul li { clear:both; width:100%; border:0 none; border-bottom:1px solid #c9c9c9; } ul#navigation ul li { background:none; padding:7px 15px; color:#616161; text-shadow:1px 1px 0px #fff; text-decoration:none; display:inline-block; border:0 none; float:left; clear:both; width:150px; } ul#navigation li a.first { border-left: 0 none; } ul#navigation li a.last { border-right: 0 none; } but failed..where have add field reach screen????
check out below link.
http://jsfiddle.net/bdd9u/564/
.navbar .navbar-nav { display: inline-block; float: none; } .navbar .navbar-collapse { text-align: center; } 
Comments
Post a Comment