I have an image with a class of author-pic, its working how I want it to, except on the second to last media query it's stretching horizontally, when display flex is set. I know you're not supposed to use % with children of display flex, however author-pic is not an immediate child, does this mean you cant use % on any children when using display flex? If so how can I fix this because flex-basis doesnt seem to work either, I'm assuming because author-pic isnt an immediate child.
https://jsfiddle.net/svb0gxgg/2/
#media screen and (min-width: 400px){
.author-pic{
min-width: 300px;
width: 25%;
height: 25%;
float: left;
margin: 0 .5em;
}
section h2{
font-size: 1.5em;
}
section h3{
font-size: 1.3em;
}
/***home page***/
.home-page-greeting{
font-size: 1.8rem;
}
.front-of-book-front,
.back-of-book-front,
.book-front,
.book-back,
.book{
width: 113px;
height: 180px;
}
.front-of-book-front:before{
width: 133px;
height: 17px;
transform: translate(8px,105px) rotate(90deg);
-moz-transform: translate(8px,105px) rotate(90deg);
}
.front-of-book-front:after{
width: 83px;
height: 14px;
transform: translate(0,21px);
-moz-transform: translate(0,21px);
}
.bar{
width: 95px;
height: 10px;
background-color: rgba(0,0,0,.8);
font-size: .3em;
color: white;
text-align: right;
transform: rotate(90deg) translate(42px,-45px);
-moz-transform: rotate(90deg) translate(42px,-45px);
}
.book-back p{
font-size: .4rem;
margin: 2.9em 1.9em;
}
.book-side{
width: 176px;
height: 10px;
top:-3px;
}
header{
height: 130px;
display: flex;
justify-content: center;
}
header h1{
font-size: 2em;
align-self: flex-start;
white-space: nowrap;
border: 8px solid black;
}
header nav{
display: block;
align-self: flex-end;
position: initial;
width: initial;
}
.main-nav{
display: flex;
justify-content: flex-end;
width:initial;
}
.main-nav li{
border-radius: 8px;
padding: 5px;
font-size: 1.3rem;
background-color: transparent;
margin: 0 4px;
width:initial;
}
.drop-menu{
top: 34px;
}
.drop-menu li{
margin: 0;
border-radius: 0;
}
/***charactor page*****/
.character-pic{
width: 25%;
height: 25%;
}
}
#media screen and (min-width:860px){
body{
background-position: center;
}
header{
height: 120px;
justify-content: space-between;
}
header h1{
margin: 0 0 0 20px;
}
.main-nav li{
font-size: 1.5rem;
}
header nav{
margin: 0 40px 0 0;
width: initial;
}
.drop-menu{
top: 38px;
}
section h2{
font-size: 1.8em;
}
/***home page***/
.amazonBookLabel{
font-size: 1.5em;
}
/**home page book**/
.front-of-book-front,
.back-of-book-front,
.book-front,
.book-back,
.book{
width: 200px;
height: 320px;
}
.front-of-book-front{
perspective: 200px;
}
.front-of-book-front:before{
width: 234px;
height: 37px;
transform: translate(11px,185px) rotate(90deg);
font-size: 1em;
line-height: 37px;
}
.front-of-book-front:after{
width: 146px;
height: 26px;
transform: translate(0,32px);
}
.bar{
width: 172px;
height: 23px;
background-color: rgba(0,0,0,.8);
font-size: .3em;
color: white;
text-align: right;
transform: rotate(90deg) translate(74px,-82px);
font-size: .7em;
}
.bar p{
display: block;
padding: 12px 5px 0 0;
}
.book-side{
width: 312px;
height: 10px;
top:-1px;
left: -5px;
}
.book-back p{
font-size: .7em;
margin: 3.3em 2.3;
}
/*****author page******/
.authorWrapper{
display: flex;
margin: auto;
}
.authorWrapper :nth-child(1){
flex-basis: 75%;
}
.authorWrapper :nth-child(2){
flex-basis: 25%;
}
}
If you want an image to scale properly you need only use width or only use height. Your image looks weird because you have the height set at 25%. Remove that and it should work. If you need to use both make sure you have the ratio correct, eg 4:3
use align-items. The default value is stretch, which is being applied here. Looks like you want to use flex-start instead.
/*************general*********************/
html,
body {
min-height: 100vh;
}
body {
margin: 0px;
// background-image: linear-gradient( 0, rgba(0,0,0,.8) 30%, rgba(0,150,255,.8) 100%), url("images/mainCover.jpg");
-moz-background-image: linear-gradient( 0, rgba(0, 0, 0, .8) 30%, rgba(0, 150, 255, .8) 100%), url("images/mainCover.jpg");
background-position: 40%;
background-repeat: no-repeat;
background-size: cover;
}
img {
max-width: 100%;
}
h1,
h2,
h3 {
font-family: arial;
text-align: center;
margin: 20px auto;
}
ul {
list-style: none;
text-align: center;
padding: 0;
}
a:visited,
a {
color: black;
}
section {
margin: 1%;
color: white;
}
section > article {
padding: 1em;
background-color: rgba(0, 0, 0, .5);
border-radius: 15px;
margin: 10px;
}
section h2,
section h3 {
text-align: center;
}
section h2 {
font-size: 1.3em;
text-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
}
section h3 {
font-size: 1.1em;
}
article:after {
content: "";
display: block;
clear: both;
}
/*nav and header*/
header {
background-color: rgba(255, 165, 0, .8);
display: flex;
flex-flow: row wrap;
justify-content: center;
border-bottom: 8px solid black;
}
header h1 {
text-align: center;
margin: 0;
padding: 15px;
font-size: 1.5em;
text-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
}
header h1,
nav a {
font-weight: 700;
font-family: arial;
}
header nav {
position: fixed;
bottom: 0;
width: 100%;
z-index: 1;
// background-color: rgba(255,165,0,.8);
}
.main-nav {
margin: 0;
width: 100%;
color: white;
font-family: arial;
font-weight: 600;
}
nav ul li {
text-align: center;
border: 1px solid white;
border-radius: 15px;
font-size: 1.2rem;
background-color: rgba(255, 165, 0, .8);
width: 100%;
}
.drop-menu-back {
display: none;
width: 100%;
}
a {
text-decoration: none;
}
nav a:visited,
nav a,
h1 {
color: white;
}
.main-nav .current-page {
background-color: rgba(0, 0, 0, .5);
}
/****drop down menu****/
.characters:hover {
position: relative;
border-radius: 8px 8px 0 0;
}
.drop-menu {
position: absolute;
visibility: hidden;
display: block;
top: 38px;
white-space: nowrap;
left: -2px;
background-color: rgba(255, 165, 0, .8);
border: 1px solid rgba(0, 0, 0, .02);
box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, .3);
opacity: 0;
transition: opacity 300ms ease-in-out 0s;
z-index: 1;
}
.characters:hover .drop-menu {
visibility: visible;
opacity: 1;
}
/*******************home page*********************/
.home-page-greeting {
color: white;
text-align: center;
text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
}
.bookWrapper {
width: 25%;
margin: auto;
}
.bookLink {
display: block;
margin: auto;
}
.bookImage {
margin: 35px auto;
display: block;
//max-height: 300px;
}
.amazonBookLabel {
background-color: rgba(0, 0, 0, .5);
color: white;
padding: 10px;
font-weight: 600;
border-radius: 20px;
margin: 30px auto;
text-align: center;
position: relative;
max-width: 200px;
}
.amazonBookLabel:after {
content: "";
width: 30px;
height: 5px;
background-color: rgba(0, 0, 0, .5);
position: absolute;
bottom: -5px;
left: calc(50% - 17px);
}
.amazonBookLabel:before {
content: "";
width: 0;
height: 0;
border-left: 40px solid rgba(0, 0, 0, .5);
border-top: 40px solid transparent;
position: absolute;
bottom: -45px;
transform: rotate(-45deg);
transform-origin: top left;
left: calc(50% - 30px);
}
/***home page book***/
.front-of-book-front,
.back-of-book-front,
.book-front,
.book-back,
.book {
width: 100px;
height: 160px;
position: relative;
perspective: 800px;
}
.book {
margin: 52px auto;
transition: transform 1s ease-in-out 0s;
-moz-transition: transform 1s ease-in-out 0s;
}
.book-front {
position: relative;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-origin: left;
-moz-transform-origin: left;
transition: transform 1s ease-in-out 0s;
-moz-transition: transform 1s ease-in-out 0s;
box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, .5);
perspective: 400px;
perspective-origin: -200px;
}
.front-of-book-front {
background-image: url("images/mainCover.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 47%;
backface-visibility: hidden;
}
.front-of-book-front:before {
content: "Seraph Chronicles: Evangelion";
text-shadow: 2px 2px 1px rgba(0, 0, 0, .5);
font-size: .5em;
line-height: 15px;
color: white;
width: 119px;
height: 15px;
background-color: rgba(255, 165, 0, .5);
position: absolute;
text-align: center;
transform: translate(8px, 93px) rotate(90deg);
-moz-transform: translate(8px, 93px) rotate(90deg);
}
.front-of-book-front:after {
content: "";
width: 75px;
height: 12px;
background-color: rgba(255, 165, 0, .5);
position: absolute;
transform: translate(0px, 19px);
-moz-transform: translate(0px, 19px);
}
.bar {
width: 80px;
height: 8px;
background-color: rgba(0, 0, 0, .8);
font-size: .3em;
color: white;
text-align: right;
transform: rotate(90deg) translate(36px, -45px);
-moz-transform: rotate(90deg) translate(36px, -45px);
}
.bar p {
padding: 2px 3px 0 0;
display: block;
}
.back-of-book-front {
backface-visibility: hidden;
background-color: rgb(240, 234, 214);
transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
position: absolute;
top: 0;
}
.book-front:hover {
transform: rotatey(-180deg);
}
.book:hover {
transform: rotate(10deg);
}
.book-back {
position: absolute;
top: 0;
background-color: rgb(240, 234, 214);
z-index: -1;
box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, .5);
text-align: justify;
}
.book-back p {
font-size: .3rem;
margin: 2.9em 1.9em;
}
/**********author page********/
.author-pic {
display: block;
margin: auto;
width: 200px;
;
}
section article {
padding: 1em;
background-color: rgba(0, 0, 0, .5);
border-radius: 15px;
margin: 10px;
clear: both;
}
address {
margin: 15px auto;
width: 125px;
font-family: arial;
}
.email {
background-image: url("images/mail-icon.png");
background-repeat: no-repeat;
background-size: contain;
background-position: 0 50%;
}
.email a,
.facebook a,
.email:visited,
.facebook:visited {
color: white;
font-style: normal;
font-weight: 500;
}
address a {
display: block;
line-height: 19px;
}
.facebook {
background-image: url("images/facebook-icon.png");
background-size: contain;
background-repeat: no-repeat;
background-position: 0 50%;
}
/*******characters page********/
.charater-pic {
width: 100%;
}
/***responsive***/
#media screen and (max-width: 400px) {
.drop-menu {
top: -97px;
width: 100%;
}
.drop-menu-back {
display: block;
width: 100%;
position: relative;
line-height: 22px;
}
.characters:hover {
border-radius: 15px;
}
.drop-menu-back span {
padding: 0;
font-size: .8em;
margin: 0 .5em 0 0;
}
.drop-menu {
background-color: transparent;
}
footer {
height: 100px;
}
}
#media screen and (min-width: 400px) {
.author-pic {
min-width: 300px;
width: 25%;
height: 25%;
float: left;
margin: 0 .5em;
}
section h2 {
font-size: 1.5em;
}
section h3 {
font-size: 1.3em;
}
/***home page***/
.home-page-greeting {
font-size: 1.8rem;
}
.front-of-book-front,
.back-of-book-front,
.book-front,
.book-back,
.book {
width: 113px;
height: 180px;
}
.front-of-book-front:before {
width: 133px;
height: 17px;
transform: translate(8px, 105px) rotate(90deg);
-moz-transform: translate(8px, 105px) rotate(90deg);
}
.front-of-book-front:after {
width: 83px;
height: 14px;
transform: translate(0, 21px);
-moz-transform: translate(0, 21px);
}
.bar {
width: 95px;
height: 10px;
background-color: rgba(0, 0, 0, .8);
font-size: .3em;
color: white;
text-align: right;
transform: rotate(90deg) translate(42px, -45px);
-moz-transform: rotate(90deg) translate(42px, -45px);
}
.book-back p {
font-size: .4rem;
margin: 2.9em 1.9em;
}
.book-side {
width: 176px;
height: 10px;
top: -3px;
}
header {
height: 130px;
display: flex;
justify-content: center;
}
header h1 {
font-size: 2em;
align-self: flex-start;
white-space: nowrap;
border: 8px solid black;
}
header nav {
display: block;
align-self: flex-end;
position: initial;
width: initial;
}
.main-nav {
display: flex;
justify-content: flex-end;
width: initial;
}
.main-nav li {
border-radius: 8px;
padding: 5px;
font-size: 1.3rem;
background-color: transparent;
margin: 0 4px;
width: initial;
}
.drop-menu {
top: 34px;
}
.drop-menu li {
margin: 0;
border-radius: 0;
}
/***charactor page*****/
.character-pic {
width: 25%;
height: 25%;
}
}
#media screen and (min-width:860px) {
body {
background-position: center;
}
header {
height: 120px;
justify-content: space-between;
}
header h1 {
margin: 0 0 0 20px;
}
.main-nav li {
font-size: 1.5rem;
}
header nav {
margin: 0 40px 0 0;
width: initial;
}
.drop-menu {
top: 38px;
}
section h2 {
font-size: 1.8em;
}
/***home page***/
.amazonBookLabel {
font-size: 1.5em;
}
/**home page book**/
.front-of-book-front,
.back-of-book-front,
.book-front,
.book-back,
.book {
width: 200px;
height: 320px;
}
.front-of-book-front {
perspective: 200px;
}
.front-of-book-front:before {
width: 234px;
height: 37px;
transform: translate(11px, 185px) rotate(90deg);
font-size: 1em;
line-height: 37px;
}
.front-of-book-front:after {
width: 146px;
height: 26px;
transform: translate(0, 32px);
}
.bar {
width: 172px;
height: 23px;
background-color: rgba(0, 0, 0, .8);
font-size: .3em;
color: white;
text-align: right;
transform: rotate(90deg) translate(74px, -82px);
font-size: .7em;
}
.bar p {
display: block;
padding: 12px 5px 0 0;
}
.book-side {
width: 312px;
height: 10px;
top: -1px;
left: -5px;
}
.book-back p {
font-size: .7em;
margin: 3.3em 2.3;
}
/*****author page******/
.authorWrapper {
display: flex;
margin: auto;
align-items: flex-start;
}
.authorWrapper:nth-child(1) {
flex-basis: 75%;
}
.authorWrapper:nth-child(2) {
flex-basis: 25%;
}
}
#media screen and (min-width: 1109px) {
header h1 {
font-size: 3em;
margin: 0 0 0 80px;
}
.main-nav > li {
margin: 0 8px;
}
header nav {
margin: 0 80px 0 0;
}
/***home page***/
.home-page-greeting {
font-size: 2.5rem;
}
}
<header>
<h1>Seraph Chronicles</h1>
<nav>
<ul class="main-nav">
<li class="main-nav-item">Home</li>
<li class="main-nav-item">About</li>
<li class="main-nav-item characters">
Characters
<ul class="drop-menu">
<li class="drop-menu-back"><span class="material-icons">arrow_back</span>Back</li>
<li>Ethan Clarke</li>
<li>Serena Kiriaga</li>
<li>Marcus Flynn</li>
<li>Emily Ashdown</li>
<li>Director Miles West</li>
</ul>
</li>
<li class="main-nav-item current-page">Author</li>
</ul>
</nav>
</header>
<main>
<section>
<div class="authorWrapper">
<article class="aboutAuthor">
<h2>About the Author</h2>
<img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="picture of author, Kyle Feller" class="author-pic">
<p>sd t yghjiu hgfdwert yuikjn dnmkjhjh jhbnjhn jhnjhnmkjn mkjhnjhn mkjhnmkjn mkjn mkwjnedkj njhbnkjnmkj nmkjnm kjnmkjnmkj hnmkjnmk jnmjhbcnk jcbnjkj bnkjnbnk jnkjnnk jnkj nkj nknk jn nkjn bnkjnbnkm nnmknmkmn kjnkmnkjnmkj nmjnjnmk jnmjnmkjnb jxncbcjbnkj
nbnjkjhb njhnbkj njnbnkjnk jnmjhnmjn mkjnmjnm jnjnbnmjnj njhnmkjh nbnjnbnk jnbnjkjnj kjnkjnkjn kjnbnkjnbn kjnbnkj nbnkjn nknbnjnb nkjnbnmnn kjnnmmn kjnkmnkj mnkjnkjn nkjmnkjm nkjmnkm jcncc ncncncncnc ncnc ncnncnc ncncnc
</p>
</article>
<article>
<h2>Contact Me</h2>
<ul>
<li><address class="email">Email Me</address></li>
<li><address class="facebook"> Follow Me</address></li>
</ul>
</article>
</div>
</section>
</main>
<footer>
</footer>
I have a problem after installed "Mobile Navigation" Wordpress Plugin to enable a mobile menu for my custom theme got fill the 100% of the width of the screen. So how I can make that mobile menu fill the 50% of the width of the screen like concept below?
Here css for mobile menu
.mn-navigation-wrap.mn-dark [class*="icono-"] {
color: #000; }
.mn-icon-wrap {
position: relative;
padding: 12px;
border: 1px solid transparent;
display: inline-block;
box-sizing: content-box;
vertical-align: top;
background-color: transparent;
margin-bottom: 0;
overflow: hidden;
float: right;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.mn-icon-wrap:hover {
cursor: pointer; }
.mn-icon-wrap [class*="icono-"], .mn-icon-wrap [class*="icono-"] * {
box-sizing: border-box; }
.mn-icon-wrap [class*="icono-"] {
display: inline-block;
vertical-align: middle;
position: relative;
font-style: normal;
color: #fff;
text-align: left;
text-indent: -9999px;
direction: ltr; }
.mn-icon-wrap [class*="icono-"]:before,
.mn-icon-wrap [class*="icono-"]:after {
content: '';
pointer-events: none; }
.mn-icon-wrap .icono-cross:before {
width: 20px;
height: 2px; }
.mn-icon-wrap .icono-cross:after {
height: 20px;
width: 2px; }
.mn-icon-wrap .icono-cross:before,
.mn-icon-wrap .icono-cross:after {
box-shadow: inset 0 0 0 32px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 5px; }
.mn-icon-wrap .icono-bars {
width: 20px;
height: 2px;
box-shadow: inset 0 0 0 32px,0 -6px,0 6px;
margin: 16px 7px;
border-radius: 5px; }
.mn-icon-wrap .icono-cross {
display: none;
width: 30px;
height: 30px;
margin: 2px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg); }
.mn-navigation-wrap {
display: none;
max-height: 60px;
background: #000;
background: #dd3333;
overflow: hidden;
position: fixed;
width: 100%;
top: 0;
z-index: 10000; }
.mn-navigation-wrap.hidebar {
-webkit-transition: max-height 0.3s ease-in-out;
-moz-transition: max-height 0.3s ease-in-out;
-o-transition: max-height 0.3s ease-in-out;
transition: max-height 0.3s ease-in-out; }
.mn-navigation-wrap .mn-logo-text {
float: left;
height: 60px;
line-height: 60px;
padding-left: 20px;
font-size: 24px; }
.mn-navigation-wrap .mn-logo-text a {
color: #fff;
text-decoration: none;
font-family: Georgia;
font-family: ''; }
.mn-navigation-wrap .mn-logo-image {
height: 60px;
display: block;
float: left;
padding: 10px 15px;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.mn-navigation-wrap .mn-logo-image img {
height: 100%;
width: auto; }
.mn-navigation-wrap .mn-menu-wrap {
display: none;
font-family: Arial;
font-family: ''; }
.mn-navigation-wrap .mn-menu-wrap ul {
clear: both;
padding: 0;
margin: 0; }
.mn-navigation-wrap .mn-menu-wrap .sub-menu a {
padding-left: 50px; }
.mn-navigation-wrap .mn-menu-wrap .sub-menu .sub-menu a {
padding-left: 80px; }
.mn-navigation-wrap .mn-menu-wrap .sub-menu .sub-menu .sub-menu a {
padding-left: 110px; }
.mn-navigation-wrap .mn-menu-wrap .sub-menu .sub-menu .sub-menu .sub-menu a {
padding-left: 140px; }
.mn-navigation-wrap .mn-menu-wrap .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu a {
padding-left: 170px; }
.mn-navigation-wrap .mn-menu-wrap .current-menu-item > a,
.mn-navigation-wrap .mn-menu-wrap .current_page_item > a {
background: rgba(255, 255, 255, 0.2); }
.mn-navigation-wrap .mn-menu-wrap li a {
color: rgba(255, 255, 255, 0.8);
padding: 10px 20px;
display: block;
list-style: none;
text-decoration: none;
line-height: 1.5; }
.mn-navigation-wrap .mn-menu-wrap li a:hover {
background: rgba(255, 255, 255, 0.3); }
.mn-navigation-wrap.mn-dark .mn-logo-text a {
color: #000; }
.mn-navigation-wrap.mn-dark .mn-menu-wrap li a {
color: rgba(0, 0, 0, 0.8); }
.mn-navigation-wrap.mn-dark .mn-menu-wrap li a:hover {
background: rgba(0, 0, 0, 0.3); }
.mn-navigation-wrap.mn-dark .mn-menu-wrap .current-menu-item > a,
.mn-navigation-wrap.mn-dark .mn-menu-wrap .current_page_item > a {
background: rgba(0, 0, 0, 0.2); }
#media only screen and (max-width: 500px) {
html {
padding: 0 !important;
margin: 0 !important;
margin-top: 60px !important; }
html body {
padding: 0 !important;
margin: 0 !important; }
html.mn-open {
overflow: hidden !important;
background: #000;
background: #dd3333; }
html.mn-open body {
overflow: hidden !important; }
html.mn-open .mn-navigation-wrap {
top: 0;
left: 0;
z-index: 10000;
height: 100%;
max-height: 100%;
overflow-y: auto;
background: #000;
background: #dd3333; }
html.mn-open .mn-menu-wrap {
display: block; }
html .mn-navigation-wrap {
display: block; }
html .mn-navigation-wrap.hidebar {
max-height: 0; } }
For further detail please check out my development url
You should really start using google chrome to inspect these things and work css out for yourself, the below is really basic stuff. The below needs to go into your stylesheet at the bottom
There are two issues, the red background is applied to html so remove that and then set the width element to the percentage value you want.
#media only screen and (max-width: 700px){
html.mn-open{
background: none;
}
.mn-navigation-wrap{
width: 50%;
}
}
Hi guys so I am creating a website and on the homepage I would like to make the 3 images fade in and out of each other and I can not figure out what I am doing wrong. The images change if I press next but when I want them to transition by themselves after a certain time they don't. Here is my code in CSS, thanks for the help.
#import url(http://fonts.googleapis.com/css?family=Varela+Round);
html, body { background: #333 url("http://codepen.io/images/classy_fabric.png"); }
.slides {
padding: 0;
width: 800px;
height: 534px;
display: block;
margin: 0 auto;
position: relative;
}
.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.slides input { display: none; }
.slide-container { display: block; }
.slide {
top: 0;
opacity: 0;
width: 800px;
height: 534px;
display: block;
position: absolute;
transform: scale(0s);
transition: all .7s fade;
}
.slide img {
width: 100%;
height: 100%;
}
/*---.nav label {
width: 200px;
height: 100%;
display: none;
position: absolute;
opacity: 0;
z-index: 9;
cursor: pointer;
transition: opacity 1s;
color: #FFF;
font-size: 175pt;
text-align: center;
line-height: 450px;
font-family: "Varela Round", sans-serif;
background-color: rgba(255, 255, 255, .3);
text-shadow: 0px 0px 15px rgb(119, 119, 119);
}
---*/
/*-- .slide:hover + .nav label { opacity: 0.5; } --*/
/*-- .nav label:hover { opacity: 1; } --*/
/*-- .nav .next { right: 0; } ---*/
input:checked + .slide-container .slide {
opacity: 1;
transform: scale(1);
transition: opacity 1s fade;
}
input:checked + .slide-container .nav label { display: none; }
.nav-dots {
width: 100%;
bottom: 9px;
height: 11px;
display: block;
position: absolute;
text-align: center;
}
.nav-dots .nav-dot {
top: -5px;
width: 11px;
height: 11px;
margin: 0 4px;
position: relative;
border-radius: 100%;
display: inline-block;
background-color: rgba(0, 0, 0, 0.6);
background: #C9C9C9;
}
.nav-dots .nav-dot:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.8);
background: #FFFFFF;
}
input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
{
background: rgba(0, 0, 0, 0.8);
}
.clearfix {
clear: both;
}
hey everyone I'm working on a WordPress theme called Jobify, I would like to change the header color. The theme comes with a color setting but it build to change the overall color of the site to the selected color
my header code below:
/**
* 4.0 Header
* ----------------------------------------------------------------------------
*/
.site-header {
box-shadow: inset rgba(0, 0, 0, .10) 0 -4px 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.site-header .container {
position: relative;
padding: 1.5em;
}
.site-branding {
float: left;
}
.site-branding:hover {
text-decoration: none;
}
.site-header.open .site-branding {
float: none;
}
.site-title {
font: bold 22px/normal 'Montserrat', sans-serif;
text-transform: uppercase;
margin: 2px 0 0;
padding: 0;
}
.primary-menu-toggle {
float: right;
right: 0;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
.site-header.open .primary-menu-toggle {
float: none;
position: relative;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
}
.site-description {
display: none;
}
.primary-menu-toggle i:before {
font-size: 36px;
margin-top: 4px;
}
.site-primary-navigation,
.site-header.open .primary-menu-toggle.in-header {
display: none;
}
.site-header.open .site-primary-navigation {
display: block;
clear: both;
margin-top: 2em;
}
.site-header.open .primary-menu-toggle,
.site-header.open .primary-menu-toggle span,
.site-header.open .primary-menu-toggle i {
float: none;
vertical-align: middle;
display: inline-block;
}
.site-header.open .primary-menu-toggle span {
padding-top: 4px;
}
.site-primary-navigation #searchform {
margin: 1em 0;
}
.site-primary-navigation #searchform div {
position: relative;
}
.site-primary-navigation #searchform input[type="text"] {
padding-left: 40px;
color: #fff;
width: 100%;
height: 40px;
background: rgba(0, 0, 0, .10);
border-radius: 20px;
border: 0;
}
.site-primary-navigation #searchform button {
padding: 2px 5px;
line-height: 39px;
font-size: 23px;
background: none;
left: 0;
position: absolute;
border: 0;
}
.site-primary-navigation #searchform button:hover {
border: 0;
}
.site-header.open .site-primary-navigation .nav-menu-primary {
margin: 2em 0;
padding: 0;
}
.nav-menu-primary li {
margin: 8px 0;
}
.nav-menu-primary li a {
font: 400 20px 'Varela Round',sans-serif;
text-transform: none;
padding: 10px 0;
}
.nav-menu-primary li .sub-menu {
padding-left: 1em;
}
.nav-menu-primary li .sub-menu a {
font-size: 16px;
}
I am working on a project where I am making two divs that are full width the main one comes first and the second div comes after the main div.
Main Div CSS:
*{
margin:0px;
padding:0px;
}
div.main{
top: -100px;
/*background: url(img/bg.jpg) no-repeat center center fixed #000000;*/
/*background: url(http://www.deliciousfood4u.com/wp-content/uploads/2012/05/food_steak_desktop_1302x1020_wallpaper-420339.jpg) no-repeat center center fixed #324a6f;*/
background-size: cover;
background-repeat: no-repeat;
margin-left: -1px;
position: absolute;
}
html, body, .main, #wrappertwo { height: 100%; min-height: 100%; }
.main { margin: 0 auto; oveflow: hidden; width: 100%; background-color: gray;}
I would like my end website to work similar to this website here: http://www.whitmansnyc.com/
You can see all the code here: http://jsfiddle.net/QFRB8/
Here you go, I'm sure you will have much better use than me. Just edit the box in there and delete it to have a full width with main and second div.
http://jsfiddle.net/tS9fX/
html:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Blah</title>
<link type="text/css" rel="stylesheet" media="all" href=
"style.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css_002.css" />
</head>
<body class="user_suscriptions index">
<div id="wrapper">
<h1 class="logo">Title</h1>
<h2>another title</h2>
<div class="field form_suscription">
<form novalidate="novalidate" method="post" id="new_user_suscription" data-remote=
"true" class="simple_form new_user_suscription" action="/user_suscriptions"
accept-charset="UTF-8" name="new_user_suscription">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8" /> <input type="hidden"
value="1Oz4NpXl188INQoGZkqy4LaItW/6sxtsNNruWFBJQEM=" name=
"authenticity_token" />
</div>
<div class="error_message"></div>
<div class="input email required user_suscription_email">
<input type="email" size="50" placeholder="Your email address ;)" name=
"user_suscription[email]" id="user_suscription_email" class=
"string email required left" autofocus="autofocus" />
</div><input type="submit" value="Subscribe!" name="commit" class=
"btn green-btn" />
</form>
<div class="clear"></div><small>blahb</small>
</div>
<div class="clear"></div>
<div class="content">
<div class="left">
<h2 class="logo">test subject</h2>
</div>
<div class="right">
<h2>Blah title.</h2>
<p>Blah</p>
</div>
<div class="clear"></div>
</div>
<div class="content">
<div class="block">
<h3>blag</h3>
<p>blag</p>
</div>
<div class="block">
<h3>blag</h3>
<p>blag</p>
</div>
<div class="block">
<h3>blag</h3>
<p>blag</p>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
CSS:
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
audio,
canvas,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] {
display: none;
}
html {
font-family: sans-serif; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
body {
margin: 0;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: 0;
}
h1 {
font-size: 2em;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
mark {
background: #ff0;
color: #000;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
button,
input,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
}
button,
input {
line-height: normal;
}
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
button[disabled],
input[disabled] {
cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
font: 14px "Lato", sans-serif;
background: url(http://i.imgur.com/oRLPdXl.jpg) no-repeat center center fixed;
background-size: cover;
color: #FFF; }
#bgMax {
min-height: 100%;
min-width: 1400px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0; }
a {
text-decoration: none;
color: white; }
p {
font-size: 16px;
line-height: 30px; }
li {
list-style: none; }
.clear {
clear: both;
visibility: hidden; }
.bgFade {
background-color: white; }
input[type="text"], input[type="email"] {
border: none;
padding: 14px;
font-size: 16px;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px; }
input[type="text"]:focus, input[type="email"]:focus {
border-color: red;
outline: none; }
.green-btn {
background: url("http://printgram.noflagra.com/wp-content/themes/Printgram/css/images/comofunciona-bg.png") repeat scroll 0 0 transparent;
color: white;
padding: 16px;
font-weight: bold;
display: inline-block;
width: initial;
border: none;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
transition: 0.2s all ease-out;
-webkit-transition: 0.2s all ease-out;
-moz-transition: 0.2s all ease-out;
-o-transition: 0.2s all ease-out; }
.green-btn:hover {
background: #34da97; }
.green-btn:active {
background: #08b16d; }
::-webkit-scrollbar {
width: 15px;
margin-left: 10px;
background: white;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.25); }
::-webkit-scrollbar-thumb {
border: solid 0 transparent;
border-right-width: 3px;
border-left-width: 4px;
-webkit-border-radius: 9px 6px;
-webkit-box-shadow: inset 0 0 0 1px #a1a1a1, inset 0 0 0 6px #a1a1a1; }
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow: inset 0 0 0 1px gray, inset 0 0 0 6px gray; }
::-webkit-scrollbar-track-piece {
background: transparent none;
border: solid 4px transparent;
border-right-width: 8px;
margin: 4px; }
#-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(30px); }
100% {
opacity: 1;
-webkit-transform: translateY(0); } }
#-moz-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(30px); }
100% {
opacity: 1;
-moz-transform: translateY(0); } }
#-o-keyframes fadeInUp {
0% {
opacity: 0;
-o-transform: translateY(30px); }
100% {
opacity: 1;
-o-transform: translateY(0); } }
#keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(30px); }
100% {
opacity: 1;
transform: translateY(0); } }
#-webkit-keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-moz-keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-o-keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
.logo {
font-family: "Pacifico", cursive;
color: white;
font-weight: normal;
margin: 0; }
.content {
width: 1000px;
margin: 0 auto;
padding: 100px 0px; }
.left {
float: left; }
.right {
float: right; }
header .content {
padding: 0; }
header .language {
float: right;
margin-top: 15px; }
header .language .social {
float: left;
margin-right: 10px; }
header .language .social .fb, header .language .social .tw {
float: left;
margin: 0 5px; }
header .language .select {
float: left;
background: white;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
padding: 1px 9px; }
header .language .select a {
font-weight: bold;
font-size: 12px;
color: #999999; }
.info {
animation: fadeInUp 1s 1;
-moz-animation: fadeInUp 1s 1;
-webkit-animation: fadeInUp 1s 1;
-o-animation: fadeInUp 1s 1;
width: 910px;
margin: 0 auto;
padding: 120px 0px 190px 0px;
text-align: center; }
.info small {
color: white;
display: block;
font-size: 15px;
margin: 5px;
text-shadow: 0px 1px 1px #353535;
-webkit-text-shadow: 0px 1px 1px #353535;
-o-text-shadow: 0px 1px 1px #353535;
-moz-text-shadow: 0px 1px 1px #353535; }
.info .logo {
font-size: 70px; }
.info h2 {
color: white;
font-size: 30px;
font-weight: 300;
text-align: center;
margin: 40px 0px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
-webkit-text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
-o-text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
-moz-text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); }
.info .field {
margin: 50px 0px 10px 0px;
animation: fadeInUp 1s 1;
-moz-animation: fadeInUp 1s 1;
-webkit-animation: fadeInUp 1s 1;
-o-animation: fadeInUp 1s 1;
width: 570px;
margin: 0 auto; }
.info .field input {
width: 400px;
margin: 10px 0px; }
.info .field .btn {
margin: 10px 0px; }
.info .field .green-btn {
width: initial; }
.info .social {
margin: 0px 0px 60px 0px; }
.about {
background: url("http://printgram.noflagra.com/wp-content/themes/Printgram/css/images/comofunciona-bg.png") repeat scroll 0 0 transparent; }
.about .logo {
color: white;
font-size: 50px; }
.about p {
font-weight: bold; }
.about h2 {
font-size: 22px; }
.about .left {
float: left;
width: 50%;
margin-top: 50px;
text-align: center; }
.about .right {
width: 50%;
float: right;
color: white;
font-weight: 300; }
.demo .content {
padding: 130px 0px 150px 0px;
text-align: center; }
.demo h2 {
font-size: 30px; }
.demo .social {
margin-top: 20px;
display: inline-block; }
.demo .social .fb, .demo .social .gp, .demo .social .tw {
float: left;
margin: 0 5px; }
.features {
background: url("http://printgram.noflagra.com/wp-content/themes/Printgram/css/images/porque-bg.png") repeat scroll 0 0 transparent;
overflow: hidden; }
.features .content {
padding: 100px 0px;
margin: 0 auto; }
.features .block {
float: left;
width: 30%;
margin: 15px;
text-align: center;
position: relative; }
.features .block h3 {
font-size: 22px; }
.features .block p {
padding: 0px 20px; }
.features .feature1, .features .feature2, .features .feature3, .features .feature4, .features .feature5, .features .feature6 {
width: 152px;
height: 153px;
margin: auto; }
.features .feature1 {
background: url("http://printgram.noflagra.com/wp-content/uploads/2012/08/2-tralha1.png") no-repeat scroll center center transparent;
}
.features .feature2 {
background: url("http://printgram.noflagra.com/wp-content/uploads/2012/08/1-instagram1.png") no-repeat scroll center center transparent;
}
.features .feature3 {
background: url("http://printgram.noflagra.com/wp-content/uploads/2012/08/3-foto1.png") no-repeat scroll center center transparent;
}
footer {
background: url("http://printgram.noflagra.com/wp-content/themes/Printgram/css/images/footer-bg.png") repeat scroll 0 0 transparent;
border-top: 10px solid #464646;
color: white;
height: 100%;
}
footer .content {
width: 600px;
padding: 40px 0px;
text-align: center; }
footer .content .logo {
font-size: 25px;
font-weight: 300; }
footer .content p, footer .content a {
font-weight: 700; }
footer .content ul {
text-align: center;
padding: 0px;
display: block;
margin-bottom: 50px; }
footer .content ul li {
display: inline-block; }
footer .content ul a {
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
background: #0cad6c;
padding: 3px 7px;
margin: 3px; }
#media only screen and (max-width: 480px) {
header .content {
padding: 0;
margin-top: 0;
margin-bottom: 0; }
#bgMax {
left: 50%;
margin-left: -200px; }
#wrapper {
width: inherit; }
.content, .info {
margin: 20% auto;
width: 85%;
overflow: hidden; }
.info {
margin: 12% auto;
padding-top: 50px;
padding-bottom: 50px; }
.info .logo {
font-size: 55px; }
.info h2 {
font-size: 20px; }
.info small {
font-size: 11px; }
.info .field {
width: 100%; }
.info .field input, .info .field .green-btn {
padding: 12px;
font-size: 12px;
margin-top: 0px;
margin-bottom: 5px; }
.info .field input {
width: 90%%; }
.about {
font-size: 12px;
text-align: center; }
.about .left, .about .right {
width: auto; }
.about .left {
float: inherit;
margin: 0; }
.about .left h2 {
font-size: 40px; }
.about .right h2 {
font-size: 18px; }
.about .right p {
font-size: 14px;
line-height: 28px; }
.demo .content {
padding: 50px 0px; }
.demo .social {
width: 100px; }
.features {
font-size: 12px; }
.features .content {
width: 80%;
padding: 50px 0px; }
.features .block {
width: auto;
float: inherit;
margin: 55px 0px; }
.features .block h3 {
font-size: 18px; }
.features .block p {
line-height: 28px;
font-size: 14px; }
footer .content {
margin: 20% auto;
width: 85%;
overflow: hidden;
margin: 5% auto; } }
#media only screen and (min-width: 481px) and (max-width: 1024px) {
header .content {
padding: 0;
margin-top: 0;
margin-bottom: 0; }
#wrapper {
width: inherit; }
.content, .info {
margin: 15% auto;
width: 70%;
overflow: hidden; }
.info {
margin: 8% auto;
padding-top: 50px;
padding-bottom: 50px; }
.info .field {
width: 420px; }
.info .field input {
width: 50%; }
.about {
text-align: center; }
.about .left, .about .right {
width: auto; }
.about .left {
float: inherit;
margin: 0; }
.demo .content {
padding: 50px 0px; }
.features .content {
width: 80%;
padding: 50px 0px; }
.features .block {
width: auto;
float: inherit;
margin: 55px 0px; }
footer .content {
margin: 15% auto;
width: 70%;
overflow: hidden;
margin: 5% auto; } }
.error {
color: white;
text-shadow: 0px 1px 1px #353535;
-webkit-text-shadow: 0px 1px 1px #353535;
-o-text-shadow: 0px 1px 1px #353535;
-moz-text-shadow: 0px 1px 1px #353535;
animation: fadeInUp 1s 1;
-moz-animation: fadeInUp 1s 1;
-webkit-animation: fadeInUp 1s 1;
-o-animation: fadeInUp 1s 1;
font-weight: bold; }
.exist, .succesfull {
color: #5f5f5f;
font-size: 16px;
font-weight: normal;
width: 270px;
padding: 12px 10px;
margin: 0 auto;
border-radius: 5px;
background: white;
animation: fadeInUp 1s 1;
-moz-animation: fadeInUp 1s 1;
-webkit-animation: fadeInUp 1s 1;
-o-animation: fadeInUp 1s 1; }
.temp {
display: none;
color: #cccccc; }