/*general CSS setting for generic devices
this will include all hd devices and above*/
* {
margin: 0;
padding: 0;
}
#watchonly {
display: none;
}
/*animation of the championship logo*/
#champ {
position: absolute;
top: 15%;
right: 20%;
animation-name: champ;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
}
#keyframes champ {
0% {
right: 20%;
top: 15%;
}
25% {
right: 22%;
top: 16%;
}
50% {
right: 20%;
top: 17%;
}
75% {
right: 19%;
top: 16%;
}
100% {
right: 20%;
top: 15%;
transform: rotateY(360deg);
}
}
/*navigation controls*/
nav ul li {
display: inline;
}
nav ul li a, nav ul li a:visited {
color: #006734;
display: block;
float: left;
font-size: 1.25em;
font-weight: bold;
margin: 5px 2px;
padding: 7px 10px 4px;
text-shadow: 0 1px 1px white;
text-transform: uppercase;
}
nav ul li a:hover {
text-decoration: none;
background-color: #009340;
}
nav, main, nav ul li a, .twitter-timeline {
border-radius: 30px;
}
nav {
background: #6fad60;
padding: 0 5px;
position: absolute;
right: 0;
top: 4px;
border: 1px solid #0e1f0c;
box-shadow: 0 1px 1px #0e1f0c;
}
/*switching off the watch only text*/
#watchonly {
display: none;
}
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
body {
font-size: 15px;
color: #f8f8f8;
background-color: #bcbcbc;
font-family: Arial, Helvetica, sans-serif;
}
/*the default font*/
h1, h2, h3 {
font-family: "Myriad Pro", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
color: #00923f;
text-shadow: 0 1px 1px black;
}
h1 {
font-size: 35px;
padding: 3px;
text-transform: uppercase;
}
h3 {
font-family: forte, "Myriad Pro", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
font-size: 30px;
font-weight: normal;
margin: 2px;
}
img {
width: auto;
height: 100%;
}
p {
line-height: 120%;
padding-bottom: 2px;
}
main .line {
background-color: #15242a;
border-bottom-color: #204656;
margin: 3px;
}
.line {
height: 1px;
background-color: #24404c;
border-bottom: 1px solid #416371;
margin: 2px;
overflow: hidden;
}
footer .line {
margin: 2px;
}
/*Main page size*/
#page {
width: 900px;
margin: 0 auto;
position: relative;
}
main {
background-color: #006634;
margin: 2px;
padding: 20px;
text-shadow: 0 2px 0 #001f10;
margin-top: 20px;
}
footer {
color: #000000;
margin-bottom: 30px;
text-align: center;
font-size: 10px;
}
footer a, footer a:visited {
color: #6fad60;
background-color: #006634;
padding: 2px 4px;
}
footer a:hover {
text-decoration: none;
background-color: #000000;
}
footer a.up {
float: right;
}
/*control of the twitter frame*/
.twitter-timeline {
border: 3px solid #00943f;
float: right;
margin-left: 15px;
overflow: hidden;
}
#twitter-widget-0 {
height: 500px !important;
min-height: 500px !important;
}
a, a:visited {
color: #ffffff;
text-decoration: none;
outline: none;
}
a:hover {
color: black;
text-decoration: underline;
}
a img {
border: none;
}
iframe {
width: 100%;
height: 600px;
}
/*turning off the image and allowing the iframe to show*/
#whensmall {
display: none;
}
/*control of the form*/
form {
padding: 20px;
}
textarea {
height: 300px;
width: 275px;
}
input {
padding-left: 90px;
}
/*control of map iframe*/
.map {
width: 300px;
height: 350px;
}
/*a very simple default for future use on limited screens
ie watches or screens under 300px square*/
#media only screen and (max-width: 300px) {
* {
margin: 0;
padding: 0;
}
/*Main page size*/
#page {
width: 290px;
margin: 0 auto;
position: relative;
}
/*switching off most of the page contect*/
#watchonly {
font-style: oblique;
display: flex;
color: black;
text-shadow: 0 1px 1px white;
}
footer, nav, h1, h2, h3, p, #main, .line, #champ {
display: none;
}
img {
float: left;
float: right;
padding-top: 60px;
max-width: 280px;
max-height: 200px;
}
}
/*Control of elements for small phone screens over 300 wide and below 500px
This has been left to action of the use in portrait also*/
#media only screen and (min-width: 301px) and (max-width: 500px) {
/*switching off the iframe, large champions image and the watch only text*/
#whenbig {
display: none;
}
#whensmall {
display: none;
}
#watchonly {
display: none;
}
/*animation of the championship logo*/
#champ {
position: absolute;
top: 0%;
right: 0%;
height: 55px;
animation-duration: 5s;
animation-name: champ1;
animation-timing-function: ease-in-out;
animation-delay: 2s;
transform: rotateY(360deg);
}
#keyframes champ1 {
0% {
right: 0%;
top: 0%;
}
25% {
right: 2%;
top: 2%;
}
50% {
right: 4%;
top: 1%;
transform: rotateY(160deg);
}
75% {
right: 2%;
top: 2%;
}
100% {
right: 0%;
top: 0%;
}
}
ul {
padding: 0%;
text-align: center;
display: inline;
}
nav ul li a, nav ul li a:visited {
color: #006734;
font-size: 12px;
font-weight: bold;
margin: 0px 0px;
padding: 10px 5px 10px;
text-shadow: 0 1px 1px white;
text-transform: uppercase;
}
/*change of the navigation*/
nav ul li {
display: inline;
}
nav {
position: relative;
}
/*Main page size*/
#page {
width: 295px;
margin: 0 auto;
position: relative;
}
/*map size change*/
.map {
width: 260px;
}
/*switching the twitter so as to leave only a link*/
#twitter-widget-0 {
height: 45px !important;
min-height: 5px !important;
}
.twitter-timeline {
border: 3px solid #00943f;
height: 300px;
overflow: hidden;
width: 200px;
}
/*edit of the font sizes*/
h1 {
font-size: 18px;
text-transform: uppercase;
}
h3 {
font-size: 20px;
font-weight: normal;
margin: 2px;
}
/*edit to control a smaller form*/
form {
padding: 30px;
}
textarea {
height: 300px;
width: 185px;
}
input {
padding-left: 0px;
}
}
/*Control of elements for larger phone screens/small tablets over 500 wide and below 700px
This has been left to action of the use in portrait also*/
#media only screen and (min-width: 501px) and (max-width: 700px) {
/*switching off the iframe, switching on the large champions
image and off the watch only text*/
#whenbig {
display: none;
}
#whensmall {
display: inline;
}
#watchonly {
display: none;
}
/*edit of the font sizes*/
h1 {
font-size: 30px;
text-transform: uppercase;
}
h3 {
font-size: 26px;
}
/*Main page size*/
#page {
width: 490px;
margin: 0 auto;
position: relative;
}
/*change of the navigation*/
nav ul li {
display: block;
}
/*animation of the championship logo*/
#champ {
position: fixed;
top: 36%;
right: 0%;
height: 75px;
animation-name: Champ2;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
}
#keyframes Champ2 {
0% {
right: 00%;
top: 36%;
}
5% {
right: 05%;
top: 29%;
}
10% {
right: 10%;
top: 20%;
}
15% {
right: 15%;
top: 13%;
}
20% {
right: 20%;
top: 07%;
}
25% {
right: 25%;
top: 05%;
}
30% {
right: 30%;
top: 07%;
}
35% {
right: 35%;
top: 13%;
}
40% {
right: 40%;
top: 20%;
}
45% {
right: 45%;
top: 29%;
}
50% {
right: 50%;
top: 36%;
transform: rotateY(360deg);
}
55% {
right: 45%;
top: 43%;
}
60% {
right: 40%;
top: 52%;
}
65% {
right: 35%;
top: 59%;
}
70% {
right: 30%;
top: 65%;
}
75% {
right: 25%;
top: 66%;
}
80% {
right: 20%;
top: 65%;
}
85% {
right: 15%;
top: 59%;
}
90% {
right: 10%;
top: 52%;
}
95% {
right: 05%;
top: 43%;
}
100% {
right: 00%;
top: 36%;
}
}
/*control of the twitter frame size*/
#twitter-widget-0 {
width: 100px !important;
height: 600px !important;
}
/*control of the map iframe size*/
.map {
width: 250px;
height: 300px;
padding-bottom: 40px;
}
/*edit to control a smaller form*/
form {
padding: 20px;
}
textarea {
height: 300px;
width: 185px;
}
input {
padding-left: 0px;
}
}
/*Control of elements for large phone screens/sd tablets over 700 wide and below 900px
This has been left to action of the use in portrait also*/
#media only screen and (min-width: 701px) and (max-width: 900px) {
/*switching off the iframe, switching on the large champions
image and off the watch only text*/
#whenbig {
display: none;
}
#whensmall {
display: inline;
padding: 100px;
}
#watchonly {
display: none;
}
/*Font size control*/
h1 {
font-size: 44px;
text-transform: uppercase;
padding: 0px 0px 0px;
}
h3 {
font-size: 38px;
}
/*Main page size*/
#page {
width: 700px;
margin: 0 auto;
position: relative;
}
/*edit of the navigation bar*/
nav ul li {
display: block;
}
/*Animation of the championship logo*/
#champ {
position: absolute;
top: 10px;
right: 30vw;
animation-name: champ3;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
}
#keyframes champ3 {
0% {
right: 30vw;
top: 10px;
}
10% {
right: 25vw;
top: 25px;
}
18% {
right: 25vw;
top: 40px;
}
24% {
right: 30vw;
top: 55px;
}
32% {
right: 35vw;
top: 70px;
}
40% {
right: 35vw;
top: 85px;
}
48% {
right: 30vw;
top: 100px;
transform: rotateY(360deg);
}
56% {
right: 25vw;
top: 85px;
}
64% {
right: 25vw;
top: 70px;
}
72% {
right: 30vw;
top: 55px;
}
80% {
right: 35vw;
top: 40px;
}
90% {
right: 35vw;
top: 25px;
}
100% {
right: 30vw;
top: 10px;
}
}
/*twitter frame size*/
#twitter-widget-0 {
width: 300px !important;
min-height: 5px !important;
}
/*map iframe size*/
.map {
width: 300px;
height: 300px;
padding-bottom: 40px;
}
/*form size controls*/
form {
padding: 50px;
}
textarea {
height: 300px;
width: 245px;
}
input {
padding-left: 60px;
}
}
I have been trying to validate my website via the w3c validator.
the html5 passes yet the CSS will not.
I receive parse errors (x6) at keyframes.
I have tried various french bracket arrangments as it would appear that the differing ones get picked up incorrectly
I have included my CSS
any help is much appreciated
This is my first attempt at html and css
/*general CSS setting for generic devices
this will include all hd devices and above*/
* {
margin: 0;
padding: 0;
}
#watchonly {
display: none;
}
/*animation of the championship logo*/
#champ {
position: absolute;
top: 15%;
right: 20%;
animation-name: champ;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
}
#keyframes champ {
0% {
right: 20%;
top: 15%;
}
25% {
right: 22%;
top: 16%;
}
50% {
right: 20%;
top: 17%;
}
75% {
right: 19%;
top: 16%;
}
100% {
right: 20%;
top: 15%;
transform: rotateY(360deg);
}
}
/*navigation controls*/
nav ul li {
display: inline;
}
nav ul li a, nav ul li a:visited {
color: #006734;
display: block;
float: left;
font-size: 1.25em;
font-weight: bold;
margin: 5px 2px;
padding: 7px 10px 4px;
text-shadow: 0 1px 1px white;
text-transform: uppercase;
}
nav ul li a:hover {
text-decoration: none;
background-color: #009340;
}
nav, main, nav ul li a, .twitter-timeline {
border-radius: 30px;
}
nav {
background: #6fad60;
padding: 0 5px;
position: absolute;
right: 0;
top: 4px;
border: 1px solid #0e1f0c;
box-shadow: 0 1px 1px #0e1f0c;
}
/*switching off the watch only text*/
#watchonly {
display: none;
}
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
body {
font-size: 15px;
color: #f8f8f8;
background-color: #bcbcbc;
font-family: Arial, Helvetica, sans-serif;
}
/*the default font*/
h1, h2, h3 {
font-family: "Myriad Pro", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
color: #00923f;
text-shadow: 0 1px 1px black;
}
h1 {
font-size: 35px;
padding: 3px;
text-transform: uppercase;
}
h3 {
font-family: forte, "Myriad Pro", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
font-size: 30px;
font-weight: normal;
margin: 2px;
}
img {
width: auto;
height: 100%;
}
p {
line-height: 120%;
padding-bottom: 2px;
}
main .line {
background-color: #15242a;
border-bottom-color: #204656;
margin: 3px;
}
.line {
height: 1px;
background-color: #24404c;
border-bottom: 1px solid #416371;
margin: 2px;
overflow: hidden;
}
footer .line {
margin: 2px;
}
/*Main page size*/
#page {
width: 900px;
margin: 0 auto;
position: relative;
}
main {
background-color: #006634;
margin: 2px;
padding: 20px;
text-shadow: 0 2px 0 #001f10;
margin-top: 20px;
}
footer {
color: #000000;
margin-bottom: 30px;
text-align: center;
font-size: 10px;
}
footer a, footer a:visited {
color: #6fad60;
background-color: #006634;
padding: 2px 4px;
}
footer a:hover {
text-decoration: none;
background-color: #000000;
}
footer a.up {
float: right;
}
/*control of the twitter frame*/
.twitter-timeline {
border: 3px solid #00943f;
float: right;
margin-left: 15px;
overflow: hidden;
}
#twitter-widget-0 {
height: 500px !important;
min-height: 500px !important;
}
a, a:visited {
color: #ffffff;
text-decoration: none;
outline: none;
}
a:hover {
color: black;
text-decoration: underline;
}
a img {
border: none;
}
iframe {
width: 100%;
height: 600px;
}
/*turning off the image and allowing the iframe to show*/
#whensmall {
display: none;
}
/*control of the form*/
form {
padding: 20px;
}
textarea {
height: 300px;
width: 275px;
}
input {
padding-left: 90px;
}
/*control of map iframe*/
.map {
width: 300px;
height: 350px;
}
/*a very simple default for future use on limited screens
ie watches or screens under 300px square*/
#media only screen and (max-width: 300px) {
* {
margin: 0;
padding: 0;
}
/*Main page size*/
#page {
width: 290px;
margin: 0 auto;
position: relative;
}
/*switching off most of the page contect*/
#watchonly {
font-style: oblique;
display: flex;
color: black;
text-shadow: 0 1px 1px white;
}
footer, nav, h1, h2, h3, p, #main, .line, #champ {
display: none;
}
img {
float: left;
float: right;
padding-top: 60px;
max-width: 280px;
max-height: 200px;
}
}
/*Control of elements for small phone screens over 300 wide and below 500px
This has been left to action of the use in portrait also*/
#media only screen and (min-width: 301px) and (max-width: 500px) {
/*switching off the iframe, large champions image and the watch only text*/
#whenbig {
display: none;
}
#whensmall {
display: none;
}
#watchonly {
display: none;
}
/*animation of the championship logo*/
#champ {
position: absolute;
top: 0%;
right: 0%;
height: 55px;
animation-duration: 5s;
animation-name: champ1;
animation-timing-function: ease-in-out;
animation-delay: 2s;
transform: rotateY(360deg);
}
#keyframes champ1 {
0% {
right: 0%;
top: 0%;
}
25% {
right: 2%;
top: 2%;
}
50% {
right: 4%;
top: 1%;
transform: rotateY(160deg);
}
75% {
right: 2%;
top: 2%;
}
100% {
right: 0%;
top: 0%;
}
}
ul {
padding: 0%;
text-align: center;
display: inline;
}
nav ul li a, nav ul li a:visited {
color: #006734;
font-size: 12px;
font-weight: bold;
margin: 0px 0px;
padding: 10px 5px 10px;
text-shadow: 0 1px 1px white;
text-transform: uppercase;
}
/*change of the navigation*/
nav ul li {
display: inline;
}
nav {
position: relative;
}
/*Main page size*/
#page {
width: 295px;
margin: 0 auto;
position: relative;
}
/*map size change*/
.map {
width: 260px;
}
/*switching the twitter so as to leave only a link*/
#twitter-widget-0 {
height: 45px !important;
min-height: 5px !important;
}
.twitter-timeline {
border: 3px solid #00943f;
height: 300px;
overflow: hidden;
width: 200px;
}
/*edit of the font sizes*/
h1 {
font-size: 18px;
text-transform: uppercase;
}
h3 {
font-size: 20px;
font-weight: normal;
margin: 2px;
}
/*edit to control a smaller form*/
form {
padding: 30px;
}
textarea {
height: 300px;
width: 185px;
}
input {
padding-left: 0px;
}
}
/*Control of elements for larger phone screens/small tablets over 500 wide and below 700px
This has been left to action of the use in portrait also*/
#media only screen and (min-width: 501px) and (max-width: 700px) {
/*switching off the iframe, switching on the large champions
image and off the watch only text*/
#whenbig {
display: none;
}
#whensmall {
display: inline;
}
#watchonly {
display: none;
}
/*edit of the font sizes*/
h1 {
font-size: 30px;
text-transform: uppercase;
}
h3 {
font-size: 26px;
}
/*Main page size*/
#page {
width: 490px;
margin: 0 auto;
position: relative;
}
/*change of the navigation*/
nav ul li {
display: block;
}
/*animation of the championship logo*/
#champ {
position: fixed;
top: 36%;
right: 0%;
height: 75px;
animation-name: Champ2;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
}
#keyframes Champ2 {
0% {
right: 00%;
top: 36%;
}
5% {
right: 05%;
top: 29%;
}
10% {
right: 10%;
top: 20%;
}
15% {
right: 15%;
top: 13%;
}
20% {
right: 20%;
top: 07%;
}
25% {
right: 25%;
top: 05%;
}
30% {
right: 30%;
top: 07%;
}
35% {
right: 35%;
top: 13%;
}
40% {
right: 40%;
top: 20%;
}
45% {
right: 45%;
top: 29%;
}
50% {
right: 50%;
top: 36%;
transform: rotateY(360deg);
}
55% {
right: 45%;
top: 43%;
}
60% {
right: 40%;
top: 52%;
}
65% {
right: 35%;
top: 59%;
}
70% {
right: 30%;
top: 65%;
}
75% {
right: 25%;
top: 66%;
}
80% {
right: 20%;
top: 65%;
}
85% {
right: 15%;
top: 59%;
}
90% {
right: 10%;
top: 52%;
}
95% {
right: 05%;
top: 43%;
}
100% {
right: 00%;
top: 36%;
}
}
/*control of the twitter frame size*/
#twitter-widget-0 {
width: 100px !important;
height: 600px !important;
}
/*control of the map iframe size*/
.map {
width: 250px;
height: 300px;
padding-bottom: 40px;
}
/*edit to control a smaller form*/
form {
padding: 20px;
}
textarea {
height: 300px;
width: 185px;
}
input {
padding-left: 0px;
}
}
/*Control of elements for large phone screens/sd tablets over 700 wide and below 900px
This has been left to action of the use in portrait also*/
#media only screen and (min-width: 701px) and (max-width: 900px) {
/*switching off the iframe, switching on the large champions
image and off the watch only text*/
#whenbig {
display: none;
}
#whensmall {
display: inline;
padding: 100px;
}
#watchonly {
display: none;
}
/*Font size control*/
h1 {
font-size: 44px;
text-transform: uppercase;
padding: 0px 0px 0px;
}
h3 {
font-size: 38px;
}
/*Main page size*/
#page {
width: 700px;
margin: 0 auto;
position: relative;
}
/*edit of the navigation bar*/
nav ul li {
display: block;
}
/*Animation of the championship logo*/
#champ {
position: absolute;
top: 10px;
right: 30vw;
animation-name: champ3;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
}
#keyframes champ3 {
0% {
right: 30vw;
top: 10px;
}
10% {
right: 25vw;
top: 25px;
}
18% {
right: 25vw;
top: 40px;
}
24% {
right: 30vw;
top: 55px;
}
32% {
right: 35vw;
top: 70px;
}
40% {
right: 35vw;
top: 85px;
}
48% {
right: 30vw;
top: 100px;
transform: rotateY(360deg);
}
56% {
right: 25vw;
top: 85px;
}
64% {
right: 25vw;
top: 70px;
}
72% {
right: 30vw;
top: 55px;
}
80% {
right: 35vw;
top: 40px;
}
90% {
right: 35vw;
top: 25px;
}
100% {
right: 30vw;
top: 10px;
}
}
/*twitter frame size*/
#twitter-widget-0 {
width: 300px !important;
min-height: 5px !important;
}
/*map iframe size*/
.map {
width: 300px;
height: 300px;
padding-bottom: 40px;
}
/*form size controls*/
form {
padding: 50px;
}
textarea {
height: 300px;
width: 245px;
}
input {
padding-left: 60px;
}
}
Update
According to https://www.w3.org/TR/CSS2/media.html#at-media-rule at-rules (#...) are invalid inside the #media rules (like the #keyframes rules).
So you might have to define the animations outside of the media queries and just assign them to the elements in the media query.
If you put your css in an editor that can auto-indent it you will see the problems
#media only screen and (min-width: 301px) and (max-width: 500px) {
/*switching off the iframe, large champions image and the watch only text*/
#whenbig {
display: none;
}
#whensmall {
display: none;
}
#watchonly {
display: none;
}
/*animation of the championship logo*/
#champ {
position: absolute;
#keyframes champ1 {
25% {
right: 2%;
top: 2%;
}
50% {
right: 4%;
top: 1%;
75% {
right: 2%;
top: 2%;
}
100% {
right: 0%;
top: 0%;
}
}
ul {
padding: 0%;
nav ul li a,
nav ul li a:visited {
color: #006734;
/*change of the navigation*/
nav ul li {
display: inline;
}
nav {
position: relative;
}
/*Main page size*/
#page {
width: 295px;
/*map size change*/
.map {
width: 260px;
}
/*switching the twitter so as to leave only a link*/
#twitter-widget-0 {
height: 45px !important;
.twitter-timeline {
border: 3px solid #00943f;
/*edit of the font sizes*/
h1 {
As you can see the code is missing some } and thus wrong nesting is happening.
Your #keyframe cannot been inside your block #champ it must been like this:
`
div {
width: 100px;
height: 100px;
background: red;
position :relative;
-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
75% {top: 50px}
100% {top: 100px;}
}
/* Standard syntax */
#keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
75% {top: 50px}
100% {top: 100px;}
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<p><strong>Note:</strong> The #keyframes rule is not supported in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
`
See. mymove is variable and it's located at the top level as varialbe
These validators are not end-all be-all authorities on valid html and css. If it works, and the browser doesn't throw any errors then you're fine.
Related
Building a mock website for a family member (placeholder photos). When I open the navigation menu, it pushes the screen down instead of simply opening to the right. Seems to translate the view vertically. How can I get it to just open smoothly to the right without pushing the screen view down?
1a) Screen before opening https://i.stack.imgur.com/UfuZi.png
1b) screen when I click nav menu https://i.stack.imgur.com/yfzS3.png
1c) screen when I scroll up after opening the nav menu https://i.stack.imgur.com/9cI5i.png
Here is the css for the navbar:
NAV HEADER CSS
#media only screen and (max-width: 768px) {
body .site-nav__thumb-menu {
position: absolute;
top: 20px;
bottom: unset;
left: unset;
right: unset;
padding-top: 6px;
}
.site-nav__thumb-menu span.icon-menu-label {
display: none;
}
.site-nav__thumb-menu button svg {
color: #000;
box-shadow: none !important;
}
.site-nav__thumb-menu--inactive {
transform: unset;
}
.slide-nav__wrapper {
transform: translateX(-100%) !important ;
background-color: #fff;
}
.slide-nav__dropdown .slide-nav__sublist-header {
text-decoration: none;
}
.slide-nav__overflow--thumb {
width: 100%;
background-color: #000;
height: 100%;
}
.js-menu--is-open .slide-nav__wrapper {
transform: translateX(0) !important ;
}
.site-nav__thumb-menu button {
background-color: unset !important;
padding: 0;
text-align: left;
width: auto;
min-width: auto;
box-shadow: none !important;
}
nav.slide-nav__wrapper .slide-nav {
padding-bottom: 15px;
}
.slide-nav__overflow--thumb {
left: 0;
right: 0;
bottom: unset;
top: 100px;
position: absolute;
max-height: unset;
}
.header-item.mobile-ac.header-item--icons {
flex: unset;
position: absolute;
right: 10px;
top: 8px;
}
header.site-header.small--hide {
display: block !important;
}
.header-wrapper.header-wrapper--overlay {
transition: .5s ease;
}
.header-wrapper.header-wrapper--overlay.sticky {
position: fixed;
width: 100%;
background-color: #fff;
z-index: 99;
}
.header-wrapper.header-wrapper--overlay.sticky .announcement {
display: none;
}
body .header-wrapper--overlay.sticky + .site-nav__thumb-menu {
position: fixed;
top: -18px;
z-index: 9999;
}
.slide-nav a, .slide-nav button {
color: #000;
text-align: left;
z-index: 9999 !important;
}
.slide-nav .search-modal__wrapper {
border: unset;
}
.slide-nav .search-modal__wrapper {
border: unset;
background: #f1f1f1;
padding: 5px 15px;
}
.search-mobc {
padding: 8px 16px;
display: none;
}
nav.slide-nav__wrapper .slide-nav form button {
float: right;
}
nav.slide-nav__wrapper .slide-nav form button svg {
width: 25px;
height: 40px;
}
.slide-nav__overflow {
transition: .5s ease;
}
.slide-nav__overflow--thumb.sticky {
top: 70px;
position: fixed;
z-index: 9999;
}
.slide-nav__link, .slide-nav__sublist-link {
padding: 16px 20px;
}
.slide-nav__overflow--thumb nav.slide-nav__wrapper {
width: 303px;
height: 100%;
overflow-y: auto;
}
.slide-nav a, .slide-nav button {
color: #000 !important;
}
.slide-nav__overflow--thumb .slide-nav__dropdown {
background-color: #fff;
}
.slide-nav__overflow--thumb.js-menu--is-open {
background-color: #000;
height: 100% !important;
}
.slide-nav__wrapper .slide-nav__item {
border-bottom: 1px solid #ccc;
padding: 7px 0;
}
.site-nav__thumb-menu .site-nav__thumb-cart {
display: none;
}
.account-links-m a.slide-nav__link {
border: 2px solid #000;
width: 140px;;
margin: 0 auto;
font-size: 16px;
font-family: Titling !important;
text-transform: uppercase;
display: none;
}
'Slide out menu css'
.slide-nav__overflow--thumb nav.slide-nav__wrapper {
width: 303px;
height: 100%;
overflow-y: auto;
}
.slide-nav a, .slide-nav button {
color: #000 !important;
}
.slide-nav__overflow--thumb .slide-nav__dropdown {
background-color: #fff;
}
.slide-nav__overflow--thumb.js-menu--is-open {
background-color: #000;
height: 100% !important;
}
.slide-nav__wrapper .slide-nav__item {
border-bottom: 1px solid #ccc;
padding: 7px 0;
}
There are several methods to achieve such a thing. I would recommend to remove. the top attribute which would resolve your problem.
What you are doing is :
and what you want is :
Ensuring both your top menu and your floating menu are top:0; should do the work.
I am having an issue with trying to figure out why the header on my mobile format isn't showing up.... can anyone see something I can't?? I have been trying for two weeks and I must be missing something. It appears that my larger version is working just fine, but I would appreciate any help I can get with this problem. Thank you.
/* very small mobile styles */
#media only screen and (max-width: 320px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header {
display: none;
}
.container-header-mobile {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
padding: 0;
}
.container-header-mobile img {
max-height: 100px;
min-height: 50px;
width: auto;
}
.container-header-mobile a {
text-decoration: none;
padding: 0 5px;
}
main {
text-align: center;
color: white;
padding: 0;
margin: 0;
}
main img {
max-width: 300px;
height: auto;
padding: 0;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
font-weight: bold;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 0.75em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 0.5em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
.bot-social img {
border-radius: 18px;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
/* mobile portrait styles */
#media only screen and (max-width: 768px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header {
display: none;
}
.container-header-mobile {
height: 260px;
width: 100%;
text-align: center;
position:relative;
color: #682876;
background-color: white;
padding: 0;
}
.container-header-mobile img {
max-height: 100px;
min-height: 50px;
width: auto;
}
.container-header-mobile a {
text-decoration: none;
padding: 0 5px;
}
main {
text-align: center;
color: white;
padding: 15px 2%;
margin: 0;
}
main img {
max-width: 370px;
height: auto;
padding: 5px;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 1em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 0.5em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
.bot-social img {
border-radius: 18px;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
/* laptop styles */
#media only screen and (max-width: 1024px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header-mobile {
display: none;
}
.container-header {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
}
.container-header a {
text-decoration: none;
padding: 0 5px;
}
.container-header img {
max-height: 230px;
width: auto;
padding-right: 12%;
}
.bot-social {
display: none;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.top-left img {
padding: 5px;
}
main {
text-align: center;
color: white;
padding: 15px 2%;
margin: 0;
}
main img {
max-width: 370px;
height: auto;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 2em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 1em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
/* large laptop styles */
#media only screen and (max-width: 1362px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header-mobile {
display: none;
}
.container-header {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
}
.container-header a {
text-decoration: none;
padding: 0 5px;
}
.container-header img {
max-height: 230px;
width: auto;
padding-right: 12%;
}
.bot-social {
display: none;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.top-left img {
padding: 5px;
}
main {
text-align: center;
color: white;
padding: 15px 2%;
margin: 0;
}
main img {
width: 236px;
height: auto;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 2em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 1em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
/* desktop styles */
#media only screen and (max-width: 1440px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header-mobile {
display: none;
}
.container-header {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
}
.container-header a {
text-decoration: none;
padding: 0 5px;
}
.container-header img {
max-height: 230px;
width: auto;
padding-right: 12%;
}
.bot-social {
display: none;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.top-left img {
padding: 5px;
}
main {
text-align: center;
color: white;
padding: 15px 2%;
margin: 0;
}
main img {
max-width: 500px;
height: auto;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 2em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 1em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
/* HD styles */
#media only screen and (min-width: 1441px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header-mobile {
display: none;
}
.container-header {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
}
.container-header a {
text-decoration: none;
padding: 0 5px;
}
.container-header img {
max-height: 230px;
width: auto;
padding-right: 12%;
}
.bot-social {
display: none;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.top-left img {
padding: 5px;
}
main {
text-align: center;
color: white;
padding: 15px 2%;
margin: 0;
}
main img {
max-width: 300%;
height: auto;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 2em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 1em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Volume Salon Westlake</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Caveat|Montserrat" rel="stylesheet">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="container-header">
<div class="top-left">
<a href="https://www.facebook.com/volumesalonwestlake/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/FB-f-Logo__blue_29.png" alt="Facebook">
</a>
<a href="https://www.instagram.com/explore/locations/1732209880415699/volume-salon/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/glyph-logo_May2016.png" alt="Instagram">
</a>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/header.jpg" alt="VS Logo">
<div class="top-right">
<p><b>26101 Center Ridge Rd. Westlake, OH 44145</b></p>
</div>
</div>
<div class="container-header-mobile">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/header.jpg" alt="VS Logo"><br>
<p><b>26101 Center Ridge Rd. Westlake, OH 44145</b></p>
</div>
</header>
<main>
<div>
<h1>Volume Salon, located in Westlake, Ohio is... To view offered services and schedule an appointment with one of our independent sylists, visit the links below:</h1>
</div>
<div>
<figure class="cap-bot">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/nikki.png" alt="Nikki">
<figcaption>Nikki</figcaption>
</figure>
<figure class="cap-bot">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/kevin.png" alt="Kevin">
<figcaption>Kevin</figcaption>
</figure>
<figure class="cap-bot">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/kelley2.png" alt="Kelley">
<figcaption>Kelley</figcaption>
</figure>
<figure class="cap-bot">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/anne-marie.jpg" alt="Anne-Marie">
<figcaption>Anne-Marie</figcaption>
</figure>
</div>
<div class="bot-social">
<a href="https://www.facebook.com/volumesalonwestlake/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/FB-f-Logo__blue_29.png" alt="Facebook">
</a>
<a href="https://www.instagram.com/explore/locations/1732209880415699/volume-salon/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/glyph-logo_May2016.png" alt="Instagram">
</a>
</div>
<br><br><br>
</main>
<footer>
<p>© 2018 Volume Salon</p>
<p>Made with ♥ by Valarie Pisarcik</p>
</footer>
</body>
</html>
your header doesn't show up in width fewer than 320px because you set dispaly: none.
.container-header {
display: none;
}
please change it to :
.container-header {
display: block;
}
See if this helps you:
https://codepen.io/panchroma/pen/NBaNXv
Remember that CSS code cascades. If your stylesheet has
.element{
display:block;
}
.....
.element{
display:none;
}
then the display property for .element will be none.
In your CSS code you have
#media only screen and (max-width: 320px) {
.container-header-mobile {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
padding: 0;
}
}
...
#media only screen and (max-width: 1024px) {
.container-header-mobile {
display: none;
}
}
There are two ways to stop one media query from overriding another.
In my pen I modified your media queries by adding a (min-width) to each of them, eg
#media only screen and (max-width: 320px) {
...
}
#media only screen and (min-width: 321px) and (max-width: 768px) {
...
}
#media only screen and (min-width: 769px) and (max-width: 1024px) {
...
}
the other option is to reverse the order of your media queries, have the desktop viewport first and the mobile viewport last:
#media only screen and (min-width: 1441px) {
...
}
#media only screen and (max-width: 1440px) {
...
}
#media only screen and (max-width: 1362px) {
...
}
Hope this helps!
I’m working on my portfolio website and I was wondering how do I make a block of text appeared when I scrolled down the website? So when someone scroll down, say example my About me section to appear on the left.
It depends on what kind of text effecton mouse scroll you are looking for. Here’s a nice little timeline I once used. You can change this to represent what you like:
HTML
<div class="stem-wrapper">
<div class="stem"></div>
<div class="stem-background"></div>
</div>
<header class="section header">
<div class="section-inner">
<div class="master-head">
<h1 class="page-title">Colored Stem</h1>
<p class="page-description">Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water.</p>
<p class="scroll-button" onClick="$('.post-wrapper .post:first-child .stem-overlay .icon').click();">Ready to go for a ride?</p>
</div>
</div> <!-- section-inner -->
</header> <!-- header -->
CSS
/*========== Global ==========*/
/*========== Basics ==========*/
html,
body {
height: 100%;
}
body {
background: #112C30;
margin: 0px;
padding: 0px;
font-family: sans-serif;
font-size: 15px;
line-height: 26px;
color: #B9CFD0;
font-family: 'Roboto Slab', serif;
overflow-x: hidden;
overflow-y: scroll;
}
a {
color: #B9CFD0;
text-decoration: none;
border-bottom: 1px solid #B9CFD0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Comfortaa', cursive;
}
/*========== Sections ==========*/
.header {
text-align: center;
position: relative;
z-index: 1;
background-image: linear-gradient(to bottom, #6fc7d4 0%, #39ACBD 100%);
}
.header .master-head {
padding: 7% 30px;
}
.header .page-title {
padding: 0 30px 0 30px;
font-size: 60px;
line-height: 1em;
letter-spacing: 10px;
color: #FFF;
}
.header .page-description {
margin: 30px auto;
max-width: 600px;
font-size: 18px;
line-height: 2em;
color: #FFF;
}
.header .scroll-button {
color: #FFF;
font-size: 20px;
padding: 15px 20px 15px 20px;
display: inline-block;
background: #3093A2;
cursor: pointer;
transition-duration: 0.4s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.header .scroll-button:hover {
background: #246f7b;
}
.header .scroll-button:active {
background: #194c53;
}
.main-content {
margin: 0px auto;
position: relative;
}
.main-content .section-inner,
.main-content .post-wrapper {
*zoom: 1;
}
.main-content .section-inner:before,
.main-content .post-wrapper:before,
.main-content .section-inner:after,
.main-content .post-wrapper:after {
content: "";
display: table;
}
.main-content .section-inner:after,
.main-content .post-wrapper:after {
clear: both;
}
.footer {
background: #112C30;
padding: 150px 0px 300px 0px;
position: relative;
z-index: 1;
}
.footer .good-bye {
text-align: center;
font-size: 18px;
line-height: 36px;
}
.footer .good-bye p {
display: block;
margin: 0px auto 30px auto;
max-width: 300px;
clear: both;
}
.section .section-inner {
margin: 0px auto;
width: 1024px;
}
#media only screen {
.section .section-inner {
width: auto;
max-width: 1024px;
}
}
/*========== Stem ==========*/
.stem-wrapper {
position: fixed;
top: 0px;
bottom: 0px;
left: 50%;
}
.stem-wrapper.color-yellow .stem-background {
background: #E9E566;
}
.stem-wrapper.color-green .stem-background {
background: #35C189;
}
.stem-wrapper.color-white .stem-background {
background: #FFF;
}
.stem-wrapper .stem,
.stem-wrapper .stem-background {
position: absolute;
top: 0px;
left: -30px;
width: 60px;
}
.stem-wrapper .stem {
background: #1e4f56;
height: 100%;
}
.stem-wrapper .stem-background {
background: #39ACBD;
height: 50%;
transition-duration: 0.5s;
}
.stem-padding,
.single-stem-icon {
width: 60px;
height: 60px;
margin: 0px auto;
background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/stem-mask.png) repeat-y top center;
}
.single-stem-icon.scroll-to-top {
cursor: pointer;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/scroll-to-top-icon.png);
}
/*========== Post wrapper ==========*/
.post-wrapper {
*zoom: 1;
}
.post-wrapper:before,
.post-wrapper:after {
content: "";
display: table;
}
.post-wrapper:after {
clear: both;
}
.post-wrapper .post {
position: relative;
width: 432px;
padding: 0px 0px 60px 0px;
clear: both;
opacity: 1;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.post-wrapper .post.hidden .post-content {
-webkit-transform: translateY(100px) rotateX(30deg);
transform: translateY(100px) rotateX(30deg);
opacity: 0;
}
.post-wrapper .post:hover .post-content,
.post-wrapper .post.active .post-content {
opacity: 1;
}
.post-wrapper .post:hover .post-content .meta,
.post-wrapper .post.active .post-content .meta {
opacity: 1;
-webkit-transform: none;
transform: none;
}
.post-wrapper .post:nth-child(even) {
float: right;
}
.post-wrapper .post:nth-child(odd) {
float: left;
}
.post-wrapper .post:nth-child(even) .stem-overlay {
left: -110px;
}
.post-wrapper .post:nth-child(odd) .stem-overlay {
right: -110px;
}
.post-wrapper .post.music-icon .stem-overlay .icon {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/music-icon.png);
}
.post-wrapper .post.bitbucket-icon .stem-overlay .icon {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/bitbucket-icon.png);
}
.post-wrapper .post.m-icon .stem-overlay .icon {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/m-icon.png);
}
.post-wrapper .post.twitter-icon .stem-overlay .icon {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/twitter-icon.png);
}
.post-wrapper .post .stem-overlay {
position: absolute;
top: 0px;
bottom: 0px;
width: 60px;
}
.post-wrapper .post .stem-overlay .icon {
background: transparent no-repeat center center;
height: 60px;
width: 60px;
cursor: pointer;
}
.post-wrapper .post .stem-overlay .stem-mask {
position: absolute;
top: 60px;
bottom: 0px;
left: 0px;
right: 0px;
background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/stem-mask.png) repeat-y top center;
}
.post-wrapper .post .post-content {
opacity: .3;
transition-duration: 0.4s;
-webkit-transform: none;
transform: none;
}
.post-wrapper .post .post-content .meta {
color: rgba(255, 255, 255, 0.3);
margin: 0px 0px 15px 0px;
letter-spacing: 1px;
opacity: 0;
transition-duration: 1s;
transition-delay: 0.2s;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.post-wrapper .post .post-content .post-title {
font-size: 32px;
line-height: 42px;
margin: 0px 0px 15px 0px;
}
/*========== Media queries ==========*/
#media only screen and (max-width: 1080px) {
.main-content,
.main-content .section-inner {
max-width: none;
}
.stem-wrapper {
left: 80px;
}
.stem-padding,
.single-stem-icon {
margin: 0px;
float: left;
margin-left: 50px;
}
.post-wrapper .post,
.post-wrapper .post:nth-child(even),
.post-wrapper .post:nth-child(odd) {
width: auto;
margin-left: 110px;
float: none;
}
.post-wrapper .post .stem-overlay,
.post-wrapper .post:nth-child(even) .stem-overlay,
.post-wrapper .post:nth-child(odd) .stem-overlay {
left: -60px;
right: auto;
}
.post-wrapper .post .post-content {
padding: 0px 50px;
}
}
#media only screen and (max-width: 700px) {
.header .page-title {
font-size: 40px;
}
.post-wrapper .post {
margin-left: 90px !important;
}
.post-wrapper .post .post-content {
padding: 0 25px;
}
.stem-wrapper {
left: 60px;
}
.stem-padding,
.single-stem-icon {
margin-left: 30px;
}
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
JavaScript
($) {
$(document).ready(function() {
setupFade();
setupClickToScroll();
setupPostAnimation();
setupScrollToTop();
enableScrollAbortion();
// Trigger window.scroll, this will initiate some of the scripts
$(window).scroll();
});
// Allow user to cancel scroll animation by manually scrolling
function enableScrollAbortion() {
var $viewport = $('html, body');
$viewport.on('scroll mousedown DOMMouseScroll mousewheel keyup', function(e) {
if ( e.which > 0 || e.type === 'mousedown' || e.type === 'mousewheel') {
$viewport.stop();
}
My jekyll sight had been running fine for a while until I add a blog post, which works perfectly locally, but then I get an error via email from GitHub saying
SCSS file Desktop/my-blog/css/style.scss has an error on line 1: File to import not found or unreadable: ../_sass/bootstrap. Load path: /hoosegow/.bundle/ruby/2.4.0/gems/jekyll-theme-primer-0.4.0/_sass.
I went to report this as an issue on the theme I was using, but I noticed that others were having similar build issues with Jekyll. Here's the link to that thread
Also, here is my style.css file, which seems to be causing the error.
---
---
#import '../_sass/bootstrap';
#import '../_sass/syntax-highlighting';
%oswald { font-family: 'Oswald', sans-serif; }
%roboto { font-family: 'Roboto Condensed', sans-serif; }
body {
#extend %roboto;
font-size: 18px;
line-height: 30px;
padding-top: 51px;
-webkit-font-smoothing: antialiased;
}
p {
margin-bottom: 30px;
}
section, header, footer, main, article, nav, aside { position: relative; }
a {
outline: none !important;
text-decoration: none !important;
transition: all 225ms ease;
color: rgb(19, 100, 214);
&:hover { color: #6165FF; }
}
.btn {
text-transform: uppercase;
font-weight: 400;
#extend %oswald;
}
h1, h2, h3, h4, h5, h6 { #extend %oswald; }
::selection {
background: #086AFF;
color: #fff;
}
nav.navbar {
margin: 0;
a {
text-transform: uppercase;
font-size: 16px;
}
.navbar-brand {
text-transform: none;
i {
transition: inherit;
color: rgb(19, 100, 214);
transform: scale(1);
}
&:hover i {
color: rgb(19, 100, 214);
transform: scale(1.35);
}
}
}
.title-group {
text-align: center;
padding: 0 15px;
margin: 50px 0 100px;
p {
max-width: 800px;
margin: 25px auto 0;
}
}
h1.special {
position: relative;
text-align: center;
overflow: hidden;
margin: 4;
text-transform: uppercase;
#extend %oswald;
font-size: 69px;
line-height: 69px;
font-weight: 700;
color: rgb(19, 100, 214);
span {
display: inline-block;
position: relative;
padding: 0 15px;
max-width: 1000px;
&:before, &:after {
content: '';
position: absolute;
display: block;
height: 1px;
background: #e8e8e8;
width: 99999999px;
top: 50%;
transform: translateY(-50%);
}
&:before { left: 100%; }
&:after { right: 100%; }
}
}
.tile {
position: relative;
box-shadow: 0 0.15em 0.35em 0 rgba(0, 0, 0, 0.135);
margin-bottom: 125px;
.inner-guts { padding: 50px; }
h2 {
margin: 0;
font-size: 100px;
font-weight: 400;
letter-spacing: -0.05em;
line-height: 100px;
}
.featurette {
position: relative;
display: block;
overflow: hidden;
margin-bottom: 15px;
width: 100%;
height: 550px;
background-color: #e8e8e8;
.img {
background-size: cover;
background-position: 50% 0;
background-repeat: no-repeat;
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 225ms ease;
transform: scale(1);
&:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
content: '';
background: #000;
opacity: 0.4;
transition: all 225ms ease;
}
}
iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&:hover {
.img {
transform: scale(1.2);
&:before {
opacity: 0.2;
}
}
}
}
.excerpt {
font-size: 35px;
font-weight: 300;
line-height: 49px;
color: #484848;
p {
margin: 0;
}
}
.tags {
position: absolute;
left: 0;
top: 100%;
margin-top: 15px;
span {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
text-transform: uppercase;
#extend %oswald;
}
}
.read-more {
margin-top: 50px;
width: 100%;
max-width: 175px;
position: relative;
padding-right: 75px;
i {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-54%);
font-size: 31px;
line-height: 100%;
}
}
}
aside {
font-size: 17px;
color: #525252;
margin: 16px 0;
#extend %oswald;
span {
text-transform: uppercase;
margin: 0 5px;
}
}
.site-footer {
margin-top: 200px;
}
.pagination-wrap {
text-align: center;
}
.topper {
height: 500px;
position: relative;
.img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
}
pre {
margin: 75px -100px;
}
#media only screen and (max-width : 991px) {
pre {
margin-left: 0;
margin-right: 0;
}
}
#media only screen and (max-width : 480px) {
.tile .featurette, .topper {
height: 300px;
}
h1.special,
.tile h2 {
font-size: 40px;
line-height: 44px;
}
.tile .inner-guts {
padding: 15px 25px;
}
.tile .excerpt {
font-size: 22px;
line-height: 35px;
}
}
Any advice is extremely helpful!
The error is telling you that the file bootstrap.scss can't be imported; either because it isn't in the location specified (the theme /_scss/ directory) or because it isn't called bootstrap.scss. The link you posted seems completely unrelated.
I have a codepen below. Basically, I'm trying to show a popup on hover of the highlighted circles (red), however some highlighted circles are showing up above some of the popups, even when the popups are always given a higher z-index all the time.
http://codepen.io/Wolfmans55/pen/jPwKqZ
This is the animation used for the popup, which I believe maybe the culprit.
#-webkit-keyframes popup {
0% {
transform: scale(2.5);
}
100% {
transform: scale(0);
}
}
Take out the z-index setting on .white-popup and set a higher z-index on .white-popup:hover .popup and .white:hover.
see jsfiddle
#import url(http://fonts.googleapis.com/css?family=Roboto);
body,
html {
height: 100%;
}
body {
background: #343837;
transition: opacity .25s;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
overflow: hidden;
}
.show-body {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.page {
background: #343837;
font-family: 'Roboto', sans-serif;
font-size: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 1s;
}
.page-2 {
left: auto;
right: -100%;
background: blue;
}
.prev-page,
.next-page {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
background: red;
}
.next-page {
right: 20px;
}
.prev-page {
left: 20px;
}
.page-wrapper {
position: absolute;
top: 50%;
margin-top: -303px;
width: 100%;
}
.header_section {
text-shadow: 1px 1px 1px #000;
font-size: 2em;
}
h1 {
margin: 0;
}
.blue_title {
color: #54c8e7;
font-weight: normal;
}
.primary_title {
font-size: 4em;
margin-top: -34px;
margin-bottom: 20px;
}
.sub_title {
position: relative;
font-size: 1em;
background: #343837;
padding: 0 4px;
display: inline-block;
}
.sub_title_divider {
border-top: 1px solid #54c8e7;;
position: absolute;
top: 20px;
left: 0;
width: 100%;
}
.city-name {
font-size: 2em;
}
.emphasis {
font-weight: bold;
}
.inlineblock {
display: inline-block;
}
.centertxt {
text-align: center;
}
.pos_rel {
position: relative;
}
.overflow_hidden {
overflow: hidden;
}
.vert_mid {
vertical-align: middle;
}
table {
cursor: pointer;
margin: 0 auto;
border-spacing: 1px;
}
td {
width: 10px;
height: 10px;
border-radius: 50%;
}
.white,
.white-popup {
background: #000;
position: relative;
-webkit-animation: in .25s;
}
.white-popup {
background: red;
}
/*.plan-to {
background: #018c9e;
z-index: 2;
}*/
.white-popup .popup {
cursor: auto;
-webkit-animation: popup .25s forwards;
z-index: 10;
}
.popup {
position: absolute;
width: 100px;
height: 100px;
font-size: 5px;
overflow: hidden;
background: #54c8e7;
z-index:10;
top: -45px;
left: -45px;
padding: 8px;
border: 1px solid #343837;
border-radius: 3px;
box-sizing: border-box;
}
.white-popup:hover .popup {
-webkit-animation: out .25s forwards;
z-index: 50;
}
.white:hover {
-webkit-animation: out .25s forwards;
z-index: 50;
}
#-webkit-keyframes in {
from {background:#fff; transform: scale(1);}
to {background: #54c8e7; transform: scale(2.5);}
}
#-webkit-keyframes out {
0% {background:#fff; transform: scale(1);}
100% {background: #54c8e7; transform: scale(2.5);}
}
#-webkit-keyframes popup {
0% {
transform: scale(2.5);
}
100% {
transform: scale(0);
}
}
.key {
height: 15px;
width: 15px;
border-radius: 50%;
border: 1px solid #ccc;
margin-right: 2px;
}
.key_1 {
background: #54c8e7;
}
.key_2 {
background: #018c9e;
}
.key_3 {
background: #fff;
}
.legend {
text-transform:uppercase;
font-size: 12px;
color: #fff;
margin-bottom: 30px;
}
.legend_item {
margin-left: 15px;
}
#media screen and (min-width: 768px) {
.page-wrapper {
margin-top: -388px;
}
td {
width: 15px;
height: 15px;
}
}
I added the following CSS:
td:hover {
z-index: 1;
}
And inside .white-popup selector, I removed:
z-index: 2;
line.
Seems to work for me.