How to center align logo on WordPress? - html
How can I center align the logo on this header? Also wanted to know how to enable background transparency for header background color and change the value for maximum size for the logo. Here is the CSS entry for the header section.
#header {
display: block;
position: relative;
z-index: 600;
/* Higher than the sidebar widget and widget container, sliders */
margin: 0;
padding: 0;
width: 100%;
background: #2F2E3C; }
#header > .inner {
position: relative; }
#header > .inner > .wrap {
position: relative;
min-height: 76px; }
#media only screen and (max-width: 1024px) {
#header > .inner > .warp {
min-height: 80px; } }
#media only screen and (max-width: 767px) {
#header > .inner {
text-align: center; }
#header > .inner > .wrap {
min-height: 40px; } }
#header.sticky {
position: fixed;
z-index: 999;
width: 100%; }
#media only screen and (max-width: 767px) {
#header.sticky {
position: static !important; } }
#header.sticky .wrap {
min-height: 0; }
.boxed #header.sticky {
max-width: 1180px;
width: 96%; }
.admin-bar #header.sticky {
top: 32px; }
#header.sticky #site-logo {
top: 10px; }
#header.sticky .dropdown-menu-wrap > ul.menu > li > ul.sub-menu {
top: 60px; }
#header.sticky #primary-menu > ul.menu > li > a {
line-height: 60px; }
#header.sticky #top-header-area {
display: none; }
#site-logo {
position: relative;
display: inline-block;
float: left;
left: 0;
top: 30px;
line-height: 0;
margin: 0; }
#site-logo a {
font-size: 28px;
color: #494D4E;
line-height: 36px;
direction: ltr;
display: block;
text-align: left;
/* Do not let logo get bigger than the header */
font-family: "Lato", Arial, Helvetica, Verdana, sans-serif; }
#media only screen and (max-width: 767px) {
#site-logo a {
display: inline-block;
text-align: center; } }
#site-logo a img {
max-height: 100%;
max-width: 100%; }
#media only screen and (max-width: 767px) {
#site-logo {
display: block;
float: none;
position: relative;
margin: 0 auto;
top: 0;
padding: 10px 0; }
#site-logo a img {
max-width: 75%;
margin: 0 auto; } }
#site-description {
margin: 0; }
#container {
background: #f7f7f7;
Edit:
#header {
display: block;
position: relative;
z-index: 600;
/* Higher than the sidebar widget and widget container, sliders */
margin: 0;
padding: 0;
width: 100%;
background: #2F2E3C; }
#header > .inner {
position: relative; }
#header > .inner > .wrap {
position: relative;
min-height: 76px; }
#media only screen and (max-width: 1024px) {
#header > .inner > .warp {
min-height: 80px; } }
#media only screen and (max-width: 767px) {
#header > .inner {
text-align: center; }
#header > .inner > .wrap {
min-height: 40px; } }
#header.sticky {
position: fixed;
z-index: 999;
width: 100%; }
#media only screen and (max-width: 767px) {
#header.sticky {
position: static !important; } }
#header.sticky .wrap {
min-height: 0; }
.boxed #header.sticky {
max-width: 1180px;
width: 96%; }
.admin-bar #header.sticky {
top: 32px; }
#header.sticky #site-logo {
top: 10px; }
#header.sticky .dropdown-menu-wrap > ul.menu > li > ul.sub-menu {
top: 60px; }
#header.sticky #primary-menu > ul.menu > li > a {
line-height: 60px; }
#header.sticky #top-header-area {
display: none; }
#site-logo {
position: relative;
float: left;
left: 0;
top: 30px;
line-height: 0;
margin: 0; }
#site-logo a {
font-size: 28px;
color: #494D4E;
line-height: 36px;
direction: ltr;
display: block;
text-align: left;
/* Do not let logo get bigger than the header */
font-family: "Lato", Arial, Helvetica, Verdana, sans-serif; }
#media only screen and (max-width: 767px) {
#site-logo a {
display: inline-block;
text-align: center; } }
#site-logo a img {
margin:auto;
max-height: 100%;
max-width: 100%; }
#media only screen and (max-width: 767px) {
#site-logo {
display: block;
float: none;
position: relative;
margin: 0 auto;
top: 0;
padding: 10px 0; }
#site-logo a img {
max-width: 75%;
margin: 0 auto; } }
#site-description {
margin: 0; }
#container {
background: #f7f7f7; }
Remove display: inline-block; from #site-logo then add margin:auto; to #site-logo a img.
Edit: I also noticed you have float:center; in #site-logo which is not a valid property, so I would consider removing it as it is redundant.
Related
Media Viewport Samsung S8 CSS
I am trying to fix a CSS created by someone else(I took over a job from a other company for my current client)
As for now everything working in my website except on my Samsung Galaxy S8. The footer doesnt follow the rules. I have putted everything I could find online with
#media only screen and (min-width: 360px) and (max-width: 767px) {
/* Your Styles... */
}
But still when I'm going on the website on my S8. The text in a specific part that I want to follow rules..doesnt. (Part is Footer-right2)
On iPad, Desktop its working except this.
Any ideas ?
Here my CSS :
#media and (min-width: 360px) and (max-width: 767px) {
#footer .footer-wrapper .footer-right2 {
text-align: center;
font-size: 0.5em;
font-weight: 300;
padding-left: 15px;
margin:auto;
max-width:200px;
}
#footer .footer-logo {
display: inline-block;
padding-left: 15px;
margin:auto; } }
It's working for other size so here one of them as exemple :
#media (max-width: 768px) {
#header .header-wrapper {
height: 85px; }
#header .header-toggle-menu {
position: fixed;
top: 30px;
right: 15px;
z-index: 7000;
display: block; }
#header .header-toggle-menu span {
display: block;
width: 42px;
height: 7px;
border-radius: 3px;
background-color: #1d1d1d;
transition: background-color 0.175s linear; }
#header .header-toggle-menu span + span {
margin-top: 4px; }
#header .header-menu {
position: fixed;
right: 0;
top: 0;
bottom: 0;
z-index: 6000;
padding: 7px;
width: 300px;
background-color: #08ab0f;
padding-top: 85px;
transform: translateX(300px);
transition: transform 0.225s ease-in-out; }
#header .header-menu a {
display: block;
padding: 7px;
font-size: 0.85em;
font-weight: 900;
color: #ffffff;
transition: none;
background-color: #e13649;
margin-bottom: 7px; }
#header .header-menu a:hover, #header .header-menu a:focus {
color: #ffffff; }
#header.active .header-menu {
transform: translateX(0); }
#header.active .header-toggle-menu span {
background-color: #ffffff; }
#footer .footer-wrapper .form-message {
top: 85px; }
#footer .footer-wrapper .footer-right2 {
text-align: center;
font-size: 0.5em;
font-weight: 300;
padding-left: 15px;
margin:auto;
max-width:200px;
}
#footer .footer-logo {
display: inline-block;
padding-left: 15px;
margin:auto; }
#page {
padding-top: 85px; }
.slider-container {
height: 530px;
background-color: #08ab0f; }
.slider-container .slider-slides {
height: 500px; }
.slider-container .slider-slides .slides-item {
position: relative; }
.slider-container .slider-slides .slides-item .item-left, .slider-container .slider-slides .slides-item .item-right {
position: absolute;
top: 0;
left: 0;
right: auto;
width: 100%;
height: 100%; }
.slider-container .slider-slides .slides-item .item-left {
z-index: 100;
background-color: rgba(0, 0, 0, 0.3);
text-align: center; }
.slider-container .slider-slides .slides-item .item-right {
z-index: 50; }
.slider-container .slider-navigation {
position: absolute;
bottom: 0; }
.single-team_member .team-member-header {
display: block;
align-items: stretch;
justify-content: center;
flex-direction: column;
flex-wrap: nowrap; }
.single-team_member .team-member-header .header-image {
padding: 0; }
.single-team_member .team-member-header .header-image:before {
content: '';
display: block;
padding-bottom: 56.75%; }
.single-team_member .team-member-header .header-content {
background-color: #1d1d1d;
padding: 30px 15px; } }
media queries over ruling ipad query
The media queries are working but the query for ipad get's over ruled with normal media query when resizing browser
Query being used is or over ruled is:
#products-list li:nth-child(3n+1) {
clear: left;
}
Instead of:
#products-list li:nth-child(2n+1) {
clear: left;
}
Normal Query:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
#menu #burger {
display: none;
}
#menu ul {
display: block;
max-width: 850px;
margin: 0 auto;
text-align: center;
}
#menu ul li {
display: inline-block;
text-align: center;
}
#menu ul li:nth-child(8n) {
clear: left;
margin-top: 26px;
}
#menu ul li a {
padding: 8px 16px;
transition: all .5s ease;
}
#menu ul li a:hover {
background: #000;
color: #fff;
}
#menu #lines {
max-width: 300px;
margin: 20px;
padding-top: 35px;
margin: 0 auto;
}
#menu #lines .line {
border-bottom: 1px solid #000;
}
#menu #lines #line-1 {
width: 100%;
margin-bottom: 10px;
}
#menu #lines #line-2 {
width: 66%;
margin-bottom: 10px;
margin: 0 auto;
}
#menu #lines #line-3 {
width: 33%;
margin: 0 auto;
margin-top: 10px;
}
#search-wrapper {
position: relative;
}
#search-box {
margin: 0 35px;
max-width: 250px;
float: right;
}
.nav-section {
margin: 0 35px;
margin-top: 15px;
}
#navbar #nav-left, #navbar #nav-right {
margin: 0;
}
#nav-right {
float: right
}
#products-container {
padding: 35px;
padding-top: 35px;
padding-bottom: 0;
}
#products-list {
margin: -17px;
}
#products-list li {
width: calc(33.33% - 35px);
display: inline-block;
float: left;
margin: 0 17px 0 17px;
}
#products-list li > div {
margin-bottom: 35px;
}
#products-list li:nth-child(3n+1) {
clear: left;
}
}
Below this line of code get's over ruled with the code obuve #products-list li:nth-child(3n+1);
#media only screen
and (min-width: 768px)
and (max-width: 1024px) {
#nav-right {
float: right
}
#products-container {
padding: 35px;
padding-top: 20px;
padding-bottom: 0;
}
#products-list {
margin: -20px;
}
#products-list li {
width: calc(50% - 20px);
display: inline-block;
float: left;
margin: 0 10px 0 10px;
}
#products-list li > div {
margin-bottom: 35px;
}
#products-list li:nth-child(3n+1) {
clear: left;
}
}
How to remove white space gap between body content and footer?
After researching this topic a bit, I've found that this is a fairly common question to ask, but a solution varies depending on the theme. I contact my theme's developers, but have not received a response.
I've looked through my theme's CSS and haven't been able to find how or where to get rid of this white space gap between the body content and my footer.
Here is a screenshot of the issue. (Please note: this is a screenshot of a preview; it isn't actually live). My website is: https://dental.keystoneindustries.com/
Is there a line of CSS I need to edit/remove/add? If so, where? CSS posted below.
#languageSelector {
display: none;
}
/*Language selector*/
div#all-site-wrapper.hfeed.site div.OneLinkShow.OneLinkKeepLinks {
position: absolute;
width: 100%;
left: auto;
right: auto;
z-index: 100000;
}
div#all-site-wrapper.hfeed.site div.OneLinkShow.OneLinkKeepLinks p {
max-width: 1170px;
width: auto;
padding: 15px 15px 0;
margin-left: auto;
margin-right: auto;
}
.wpr_hazzard_img {
width: auto !important;
display: block;
}
.wpr_hazzard_img_inline {
width: auto !important;
display: inline-block !important;
}
.wpr_message_box {
display: inline-block;
margin: 0 1em 1em 0;
padding: 0 20px;
vertical-align: top;
background: #fff none repeat scroll 0 0;
border: 3px solid black;
border-radius: 0;
color: black;
}
.group_table .woocommerce .quantity, .woocommerce-page .quantity{
width: 50px !important;
display: inline-block;
float: left !important;
}
.group_table .wpr_tooltip_js{
display: inline-block;
margin-top: 10px;
vertical-align: middle;
}
#all-site-wrapper .iv-layout.header .login-ajax .trigger {
font-size: 13px;
}
.header-right-area {
margin-top:12px;
}
.live-search .iv-layout.header .inner-form {
padding: 14px;
}
.live-search {
position: relative;
}
.live-search .trigger {
display: none;
}
.live-search .inner-wrapper {
visibility: visible;
opacity: 1;
position: static;
}
#all-site-wrapper .live-search:not(.search-top-style):not(.search-full-screen- alt-style):not(.search-full-screen-style) .inner-wrapper:after,
#all-site-wrapper .live-search:not(.search-top-style):not(.search-full-screen- alt-style):not(.search-full-screen-style) .inner-wrapper:before {
display: none;
}
.live-search .inner-wrapper {
width: 260px;
border: 0 none;
}
#all-site-wrapper .live-search .inner-form {
padding: 0;
}
.classic-right-area .wpr-fix .iv-module {
margin-left: 10px;
}
#media (max-width: 1200px) {
.classic-right-area {
min-height: 200px;
}
.classic-right-area .header-right-area {
position: relative;
}
#all-site-wrapper .classic-right-area .wpr-fix .iv-module {
padding-bottom: 20px;
}
#all-site-wrapper .wpr-fix {
width: auto;
}
#all-site-wrapper .login-ajax {
margin-top: 10px;
}
#all-site-wrapper .woo-cart {
margin-top: 4px;
}
}
#media (max-width: 992px) {
#all-site-wrapper .wpr-fix .iv-module {
display: block;
}
#all-site-wrapper .wpr-fix {
position: relative;
width: 100%;
}
#all-site-wrapper .login-ajax .inner-wrapper {
left: 0;
}
#all-site-wrapper .login-ajax .inner-wrapper:before {
left: 31px;
}
#all-site-wrapper .login-ajax .inner-wrapper:after {
left: 32px;
}
#all-site-wrapper .classic-right-area .custom-text {
display: none !important;
}
#all-site-wrapper .wpr-fix .live-search {
position: absolute;
top: 0;
left: 20px;
margin-left: 0;
}
}
#media (max-width: 767px) {
.wpr-spacer {
height: 130px;
width: 100%;
float: left;
}
#all-site-wrapper .wpr-fix .live-search {
margin: 0 auto !important;
position: static;
float: none;
}
#all-site-wrapper .wpr-fix .login-ajax {
position: absolute;
top: 20px;
left: 25%;
width: 200px;
}
#all-site-wrapper .wpr-fix .woo-cart {
position: absolute;
left: 41%;
top: 20px;
width: 250px;
}
#all-site-wrapper .logo img {
margin-top: 0px;
}
#all-site-wrapper .header-left-area {
display: inline-block;
float: none;
position: relative;
left: 24%;
}
#all-site-wrapper .header-left-area .logo {
margin: 35px 0 0px;
}
#all-site-wrapper .live-search .inner-form {
margin-top: -46px;
}
}
#media (max-width: 600px) {
#all-site-wrapper .wpr-fix .login-ajax {
left: 22%;
}
}
#media (max-width: 478px) {
#all-site-wrapper .wpr-fix .login-ajax {
left: 0;
width: 80px;
}
#all-site-wrapper .wpr-fix .woo-cart {
left: 24%;
width: auto;
}
#all-site-wrapper .classic-right-area .wpr-fix .iv-module.live-search {
padding-bottom: 0;
position: absolute;
right: 15px;
bottom: 15%;
left: auto;
top: auto;
}
.live-search .inner-wrapper {
width: 170px;
border: 0 none;
}
.wpr-spacer {
height: 80px;
width: 100%;
float: left;
}
.wpr-fix {
margin-top: 0;
}
div#all-site-wrapper.hfeed.site div.OneLinkShow.OneLinkKeepLinks p {
margin-bottom: 10px;
padding: 15px;
}
#all-site-wrapper .header-left-area .logo {
margin: 5px 0 0;
}
.classic-right-area .menu-area-wrapper {
border-top: 0;
border-bottom: 0;
position: absolute;
top: 0;
right: 0;
}
.classic-right-area {
min-height: 130px;
}
.classic-right-area.stuck {
min-height: inherit;
}
.classic-right-area.stuck .container {
display: block !important;
}
.classic-right-area.stuck .container .header-left-area .logo {
margin: 15px auto !important;
}
.classic-right-area.stuck .container .header-left-area .logo .logo-normal {
margin: 0 auto;
}
.classic-right-area.stuck .container .wpr-fix {
display: none;
}
}
Any help would be much appreciated!
You have elements with the class .ivan-custom-wrapper which have a margin-bottom: 45px; which is causing the white space. Either remove that margin completely or change it to a margin-top and then zero out the margin on the first instance of that element.
Mobile menu doesn't scroll
The mobile page works just like i wanted it to work but the problem is when i open site navigation, main contect is sliding down and navigation is static. i cant scroll navigation.. is it anyway that i could scroll navigation only? the site where is problem is www.budivelik.hr any idea?
body > .main-nav {
position: fixed;
top: 0;
left: -210px;
bottom: 0;
height: 100%;
padding-top: 80px;
margin-top: 0;
width: 210px;
z-index: 101;
background: #333333;
overflow: hidden;
-webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.4);
box-shadow: inset 0 0 30px rgba(0,0,0,0.4);
z-index: 150;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.main-nav.active-menu {
left: 0;
}
.main-header .nav-bar {
display: block;
}
body.menu-effect .boxed-view {
-webkit-transition: all 0.4s ease;
-webkit-transform: translate(200px,0);
z-index: 100;
position: relative;
}
body > .main-nav > ul,
body > .main-nav > ul > li {
float: none;
}
body > .main-nav > ul > li > a {
display: block;
background: rgba(0,0,0,0.3);
padding: 20px 11px 18px;
margin-left: 0;
margin-right: 0;
border-bottom-color: rgba(255,255,255,0.1);
}
body .mobile-menu-button {
display: block;
width: 62px;
height: 62px;
margin: auto;
padding: 1px 5px;
font-size: 24px;
position: absolute;
right: 76px;
top: 0;
bottom: 0px;
margin: auto;
text-align: center;
line-height: 62px;
background: url("../images/icons/menu-icon.png") no-repeat 0 0 transparent;
}
body .woocommerce-page .mobile-menu-button{
background: url("../images/icons/white-menu-icon.png") no-repeat 0 0 transparent;
background-size: cover;
right: 132px;
}
.mobile-menu-button:hover {
text-decoration: none;
}
.product .summary{
padding: 0 20px;
}
.main-header .socials{
margin: 12px 0 0;
}
.social-links > li a {
max-height: 48px;
width: 36px;
}
.main-slider .sneakers{
left: 20%;
}
.recommend-block{
margin-top: 40px;
}
.gallery-slider .quarter-size .gallery-photo-desc > div .zoom-image{
transform: scale(0.8) translate(0px, -70%);
}
}
#media screen and (max-width: 992px){
.big-footer .sportify-wrap{
display: none;
}
.big-footer .footer-block{
margin-top: 20px;
}
.contact-form label{
margin-top: 20px;
}
.error-box .sneakers-block{
padding-top: 60px;
}
.new-arrivals > .row > div{
width: 25%;
}
.new-arrivals > .row > div:nth-child(5){
border-top: medium none;
}
.new-arrivals > .row > div:nth-child(5n+1){
border-left: medium none;
}
.new-arrivals > .row > div:nth-child(4n+1){
border-left: 1px solid #e5e5e5;
}
.team-item header a{
width: 50%;
}
.team-list > li{
width: 50%;
}
.shop-slider .round-offer{
left: 50%;
}
.shop-slider .round-offer{
width: 286px;
height: 286px;
left: 40%;
}
.shop-slider .round-offer:before{
width: 334px;
height: 334px;
}
.member-box figure img{
width: 100%;
}
.commentlist > li .children{
margin-left: 20px;
}
.member-box .content{
min-height: 100px !important;
}
}
#media screen and (max-width: 768px){
.main-header .ad{
margin-top: 18px;
}
.main-header .socials{
display: none;
}
.big-footer .footer-block{
padding-bottom: 60px;
}
.big-footer .contact-block{
position: relative;
width: auto;
bottom: auto;
left: auto;
}
.big-footer .contact-block textarea{
margin-top: 30px;
}
.big-footer .contact-block .form-submit{
text-align: center;
}
.filter-box ul li,
.filter-box > div{
width: 100%;
}
.filter-box ul li a{
font-size: 18px;
padding: 10px;
}
.timetable thead tr > th:nth-child(1),
.timetable tbody tr > th{
display: none;
}
.new-arrivals > .row > div{
width: 50%;
}
.new-arrivals > .row > div:nth-child(3),
.new-arrivals > .row > div:nth-child(4),
.new-arrivals > .row > div:nth-child(5){
border-top: medium none;
}
.new-arrivals > .row > div:nth-child(5n+1){
border-left: medium none;
}
.new-arrivals > .row > div:nth-child(2n+1){
border-left: 1px solid #e5e5e5;
}
.about-box header .header-block .entry-header{
position: static;
top: 0;
left: 0;
}
.blog-box figure img{
width: 100%;
}
body .woocommerce-page .mobile-menu-button{
width: 52px;
height: 52px;
right: 160px;
}
.news-block .news-list li .row > div:hover:before{
height: 100%;
}
.commentlist > li .children{
margin-left: 10px;
}
.blog-box .blog-items > div{
width: 100%;
}
}
#media screen and (max-width: 724px){
.main-header .ad{
margin-top: 15px;
}
body .mobile-menu-button {
right: 22px;
}
.team-list > li{
width: 100%;
}
.tp-bullets {
margin-left: 5% !important;
}
}
#media screen and (max-width: 670px){
.woo-container .shopping-cart-wrap .coupon-code-block .coupon-field{
width: 50%;
}
.woo-container .shopping-cart-wrap .coupon-code-block .button{
width: 50%;
}
.update-cart{
float: none;
text-align: right;
margin-bottom: 20px;
}
}
#media screen and (max-width: 640px){
.nav-bar .identity{
text-align: center;
}
.nav-bar .identity img{
max-height: 40px;
max-width: 120px;
}
body .woocommerce-page .mobile-menu-button{
right: 130px;
width: 42px;
height: 42px;
background-position: 0 -2px;
}
body .woocommerce-page .search-block{
display: none;
}
body .woocommerce-page header .col-xs-4{
width: 100%;
}
body .woocommerce-page > header .cart-all{
margin-left: 15px;
}
body .woocommerce-page > header .cart-all i,
body .woocommerce-page > header .cart-all .amount{
width: 50%;
}
body .woocommerce-page > header .col-xs-3{
width: 100%;
}
.show-content > header .col-xs-4{
width: 100%;
}
.show-content > header .ad{
display: none;
}
.page-slider-block ul li .col-xs-6{
width: 100%;
}
.page-slider-box .slider-controls{
bottom: 30%;
}
.checkout_coupon input[type="text"]{
min-width: 120px !important;
width: auto !important;
}
}
#media screen and (max-width: 480px){
.sneakers-block{
display: none;
}
body .woocommerce-page .mobile-menu-button{
right: 10px;
}
.team-item header a{
width: 100%;
text-align: center;
padding: 10px 0 4px 10px;
}
.team-item header a br{
display: none;
}
.classes-box .classes{
width: 100%;
left: 0;
}
.classes-box nav .toggle-content .entry-header{
padding-top: 20px;
margin-top: 12px;
}
.classes-box nav .toggle-content{
position: relative;
left: 0;
width: 100%;
}
.classes-box .classes-content-block .read-more{
position: relative;
bottom: 0;
right: 0;
font-size: 20px;
line-height: 18px;
margin-top: 20px;
padding: 12px 50px 8px 0px
}
.box-header .entry-header{
font-size: 22px;
line-height: 28px;
}
body .mobile-menu-button{
right: 10px;
}
}
This is my CSS for mobile version of site..
To scroll navigation only use following css code
#media (max-width: 992px){
body > .main-nav {
overflow: scroll;
}
}
Responsive in Chrome, but not on mobile
I am using WP-skeleton, and modifing it to fit into my website. However, my website is currently only responsive in Chrome on my PC, and not on my phone.
The divs are changing the size Chrome, e.g the pictures on front page (class imagebox) are 420px when screen size is 48px, and 300px when screen size is 960px. On my phone everything is like the base 960px grid all the time, and does not resizes after the current screen size.
Could you guys help me out?
/*
Theme Name: WP-Skeleton
Theme URI: https://github.com/wycks/WP-Skeleton-Theme
Author: Wycks
Author URI: wpsecure.net
Description: Responsive Bare Bones framework based on Dave Gamache's getskeleton.com
Version: 1.0
License: http://www.opensource.org/licenses/mit-license.php.
Tags: Responsive, grid, mobile, framework, bare-bones, white, minimal
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
/* Table of Contents
==================================================
#Base 960 Grid
#Tablet (Portrait)
#Mobile (Portrait)
#Mobile (Landscape)
#Clearing */
/* #Base 960 Grid
================================================== */
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }
/* Base Grid */
.container .one.column { width: 40px; }
.container .two.columns { width: 100px; }
.container .three.columns { width: 160px; }
.container .four.columns { width: 220px; }
.container .five.columns { width: 280px; }
.container .imagebox.columns { width: 300px; margin-left: 30px; margin-top: 30px;}
.container .six.columns { width: 340px; }
.container .seven.columns { width: 400px; }
.container .eight.columns { width: 460px; }
.container .nine.columns { width: 520px; }
.container .ten.columns { width: 580px; }
.container .eleven.columns { width: 640px; }
.container .twelve.columns { width: 700px; }
.container .thirteen.columns { width: 760px; }
.container .fourteen.columns { width: 820px; }
.container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 940px; }
.container .one-third.column { width: 300px; }
.container .two-thirds.column { width: 620px; }
/* Offsets */
.container .offset-by-one { padding-left: 60px; }
.container .offset-by-two { padding-left: 120px; }
.container .offset-by-three { padding-left: 180px; }
.container .offset-by-four { padding-left: 240px; }
.container .offset-by-five { padding-left: 300px; }
.container .offset-by-six { padding-left: 360px; }
.container .offset-by-seven { padding-left: 420px; }
.container .offset-by-eight { padding-left: 480px; }
.container .offset-by-nine { padding-left: 540px; }
.container .offset-by-ten { padding-left: 600px; }
.container .offset-by-eleven { padding-left: 660px; }
.container .offset-by-twelve { padding-left: 720px; }
.container .offset-by-thirteen { padding-left: 780px; }
.container .offset-by-fourteen { padding-left: 840px; }
.container .offset-by-fifteen { padding-left: 900px; }
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
#media only screen and (min-width: 768px) and (max-width: 959px) {
.container { width: 768px; }
.container .column,
.container .columns { margin-left: 10px; margin-right: 10px; }
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
.container .one.column { width: 28px; }
.container .two.columns { width: 76px; }
.container .three.columns { width: 124px; }
.container .four.columns { width: 172px; }
.container .five.columns { width: 220px; }
.container .imagebox.columns { width: 240px; margin-left: 23px; margin-top: 23px; }
.container .six.columns { width: 268px; }
.container .seven.columns { width: 316px; }
.container .eight.columns { width: 364px; }
.container .nine.columns { width: 412px; }
.container .ten.columns { width: 460px; }
.container .eleven.columns { width: 508px; }
.container .twelve.columns { width: 556px; }
.container .thirteen.columns { width: 604px; }
.container .fourteen.columns { width: 652px; }
.container .fifteen.columns { width: 700px; }
.container .sixteen.columns { width: 748px; }
.container .one-third.column { width: 236px; }
.container .two-thirds.column { width: 492px; }
/* Offsets */
.container .offset-by-one { padding-left: 48px; }
.container .offset-by-two { padding-left: 96px; }
.container .offset-by-three { padding-left: 144px; }
.container .offset-by-four { padding-left: 192px; }
.container .offset-by-five { padding-left: 240px; }
.container .offset-by-six { padding-left: 288px; }
.container .offset-by-seven { padding-left: 336px; }
.container .offset-by-eight { padding-left: 348px; }
.container .offset-by-nine { padding-left: 432px; }
.container .offset-by-ten { padding-left: 480px; }
.container .offset-by-eleven { padding-left: 528px; }
.container .offset-by-twelve { padding-left: 576px; }
.container .offset-by-thirteen { padding-left: 624px; }
.container .offset-by-fourteen { padding-left: 672px; }
.container .offset-by-fifteen { padding-left: 720px; }
}
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
#media only screen and (max-width: 767px) {
.container { width: 300px; }
.columns, .column { margin: 0 10px; }
.container .one.column,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 280px; }
.container .imagebox.columns { width: 300px; margin-left: 0px; margin-top: 5px; clear: both;}
/* Offsets */
.container .offset-by-one,
.container .offset-by-two,
.container .offset-by-three,
.container .offset-by-four,
.container .offset-by-five,
.container .offset-by-six,
.container .offset-by-seven,
.container .offset-by-eight,
.container .offset-by-nine,
.container .offset-by-ten,
.container .offset-by-eleven,
.container .offset-by-twelve,
.container .offset-by-thirteen,
.container .offset-by-fourteen,
.container .offset-by-fifteen { padding-left: 0; }
/* Float menu left now*/
.menu ul {float:left;}
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
#media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }
.columns, .column { margin: 0 10px; }
.container .one.column,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 400px; }
.container .imagebox.columns {width: 420px; margin-top: 10px; clear: both;}
/* Float menu left now*/
.menu ul {float:left;}
}
/* #Clearing
================================================== */
/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.row:after,
.clearfix:after {
clear: both; }
.row,
.clearfix {
zoom: 1; }
/* You can also use a <br class="clear" /> to clear columns */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
img.scale-with-grid {
max-width: 100%;
height: auto; }
/* #Base NAV 960 Grid
================================================== */
nav {
padding-top: 10px;
text-align:center;
margin: 0 auto;
}
nav ul {
display: inline;
list-style-type: none;
padding-left: 0px;
}
nav li {
display: inline;
padding-left: 55px;
padding-right: 55px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 300;
}
nav li a:hover {
color:#808080;
-webkit-transition: all 0.3s ease-in-out;
}
nav li a {
color: #282828;
text-decoration: none;
font-size: medium;
}
.nav-button { display: none; }
.logoo { display: none; }
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
nav li {
padding-left: 20px;
padding-right: 20px;
}
}
#media only screen and (min-width: 0px) and (max-width: 767px) {
/* Navigation Button
-------------------------------------------------------- */
nav ul img {
display: none;
}
.logoo {
display: inline;
width: 150px;
margin-top: 0px;
margin: 0 auto;
}
.nav-button {
display: block;
position: absolute;
top: 7px;
left: 7px;
width: 50px;
height: 35px;
background: url('../images/menu-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/menu-icon-large.png'), -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/menu-icon-large.png'), -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/menu-icon-large.png'), -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background-position: center center;
background-repeat: no-repeat;
background-size: 21px, 100%;
cursor: pointer;
border: 0 none;
border-bottom: 1px solid rgba(255,255,255,.1);
box-shadow: 0 0 4px rgba(0,0,0,.7) inset;
border-radius: 5px;
z-index: 999;
text-indent: -9999px;
}
.nav-button:hover {
background-color: rgba(0,0,0,.1);
}
.nav-button.open {
background: url('../images/close-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/close-icon-large.png'), -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/close-icon-large.png'), -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background: url('../images/close-icon-large.png'), -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background-position: center center;
background-repeat: no-repeat;
background-size: 21px, 100%;
}
/* Navigation Bar
-------------------------------------------------------- */
body { padding-top: 50px; }
nav {
width: 100%;
float: none;
background-color: #b0b0b0; /* change the menu color */
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
display: block;
height: 50px;
margin: 0;
padding: 0;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0,0,0,.6);
position: absolute;
left: 0px;
z-index: 998;
clear: both;
}
nav li {
display: none;
width: 100%;
}
nav li a {
display: block;
width: 90%;
padding: 10px 5%;
font-size: 14px;
font-weight: bold;
text-shadow: -1px -1px 0 rgba(0,0,0,.15);
color: white;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,.2);
border-top: 1px solid rgba(255,255,255,.1);
}
nav li a:hover {
background-color: rgba(0,0,0,.5);
border-top-color: transparent;
}
nav > li:first-child {
border-top: 1px solid rgba(0,0,0,.2);
}
/* Toggle the navigation bar open */
nav.open {
height: auto;
padding-top: 50px;
}
nav.open li {
display: block;
}
/* Submenus – optional .parent class indicates dropdowns */
nav > li:hover > a {
background: rgba(0,0,0,.5);
border-bottom-color: transparent;
}
nav li.parent > a:after {
content: "▼";
color: rgba(255,255,255,.5);
float: right;
}
nav li.parent > a:hover {
background: rgba(0,0,0,.75);
}
nav li ul {
display: none;
background: rgba(0,0,0,.5);
border-top: 0 none;
padding: 0;
}
nav li ul a {
border: 0 none;
font-size: 12px;
padding: 10px 5%;
font-weight: normal;
}
nav li:hover ul {
display: block;
border-top: 0 none;
}
}
Make sure you add the viewport meta tag. At the bare minimum, you'll need the following: <meta name="viewport" content="width=device-width"> Additional options are available as well. Check the reference link below for more information. Reference: Mozilla Developer Network - Viewport Meta Tag