I'm learning Angular, and i came across this particular problem which i still couldn't fix. I'm using the latest version of Bootstrap on my Angular project but i'm having issues with my styles.css file (which i had already defined before installing Bootstrap). I noticed that some things about my style changed after installing Bootstrap, and i can't fix them no matter how much i edit my styles.css file
Here are some examples:
https://i.stack.imgur.com/ZVOCl.png
https://i.stack.imgur.com/1UpkS.png
I suppose that the bootstrap.min.css file introduced on Bootstrap's installation might be overriding my custom css stylesheet, but i don't really see how.
This is my index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selene Chavez -- Portfolio</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!--Box Icons-->
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
<!--Box Icons-->
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<!--Mis estilos CSS-->
<link rel="stylesheet" href="src/styles.css">
</head>
<body>
<app-root></app-root>
</body>
</html>
This is my .css stylesheet:
/* Google Fonts */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap');
* {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
scroll-padding-top: 2rem;
}
/* Variables */
:root {
--main-color: #F24822;
--body-color: #090a1a;
--container-color: #171b3c;
--heading-color: #222231;
--box-color: #0d0f26;
--bg-color: #fff;
}
body {
color: var(--bg-color);
background: var(--body-color);
}
html::-webkit-scrollbar {
width: 0.5rem;
background: transparent;
}
html::-webkit-scrollbar-thumb {
background: var(--heading-color)
}
img {
width: 100%;
}
section {
padding: 3rem 0 2rem;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.container {
max-width: 960px;
margin: auto;
width: 100%;
}
/* Header */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
.header-active {
background: var(--box-color);
transition: 0.4s;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
}
.navbar-logo {
display: inline-block;
vertical-align: middle;
width: 90px;
}
.navbar-logo img {
display: block;
width: 100%;
height: auto;
}
.navbar {
display: flex;
align-items: center;
column-gap: 1.5rem;
}
.nav-link {
font-size: 0.94rem;
padding: 4px 8px;
border-radius: 0.2rem;
color: var(--bg-color);
}
.nav-link:hover {
color: var(--main-color);
background: var(--container-color);
transition: 0.3s all linear;
}
/* Menu Icon */
.menu-icon {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
row-gap: 5px;
cursor: pointer;
z-index: 200;
transition: 0.3s;
}
.menu-icon div {
display: block;
background: var(--bg-color);
height: 2px;
width: 24px;
transition: 0.3s;
}
.move .line1 {
transform: rotate(-45deg) translate(-5px, 5px);
}
.move .line2 {
opacity: 0;
}
.move .line3 {
transform: rotate(45deg) translate(-5px, -5px);
}
.home {
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
padding-top: 7rem;
}
.home-content {
position: relative;
max-width: 600px;
width: 100%;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.home-img {
width: 180px;
height: 180px;
border-radius: 50%;
background-color: #fd7051;
overflow: hidden;
margin-bottom: 2rem;
}
.home-img {
width: 180px;
height: 180px;
object-fit: cover;
object-position: center;
}
.home-text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.home-text h3 {
position: relative;
display: flex;
align-items: center;
column-gap: 0.5rem;
font-size: 1.1rem;
color: var(--main-color);
}
.home-text h3::before {
content: '';
position: absolute;
top: 50%;
transform: translate(-50%);
left: -15px;
width: 20px;
height: 2px;
background: var(--main-color);
}
.home-text h3::after {
content: '';
position: absolute;
top: 50%;
transform: translate(-50%);
right: -35px;
width: 20px;
height: 2px;
background: var(--main-color);
}
.home-text h2 {
font-size: 3.5rem;
line-height: 4.8rem;
}
.home-text p {
font-size: 0.938rem;
margin-bottom: 1.5rem;
}
.home-text .color {
color: var(--main-color);
}
.social {
display: flex;
align-items: center;
column-gap: 0.5rem;
}
.social .bx {
font-size: 1.3rem;
padding: 10px;
border-radius: 50%;
color: var(--bg-color);
background: var(--container-color);
}
.social .bx:hover {
background: var(--main-color);
transition: 0.3s all linear;
}
/* Heading */
.heading {
font-size: 5rem;
text-transform: uppercase;
color: var(--heading-color);
text-align: center;
margin-bottom: 2rem;
}
.about-content {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.about-data span {
font-size: 1rem;
font-weight: 500;
text-transform: uppercase;
color: var(--main-color);
}
.about-data h2 {
font-size: 2rem;
line-height: 2.6rem;
font-weight: 700;
margin: 1rem 0;
}
.btn {
font-size: 0.97rem;
display: inline-flex;
align-items: center;
column-gap: 0.5rem;
color: var(--bg-color);
background: var(--main-color);
padding: 12px 16px;
border-radius: 0.4rem;
margin-top: 1rem;
}
.btn .bx {
font-size: 1.2rem;
}
.btn:hover {
background: #fd7051;
transition: 0.3s all linear;
}
.about-text p {
font-size: 0.938rem;
letter-spacing: 1px;
text-align: justify;
margin-bottom: 1.5rem;
}
/* Skills */
.skills {
padding: 50px 20px;
}
.skills .content-section {
max-width: 1100px;
margin: auto;
}
.skills .row {
display: flex;
}
.skills .row .col {
width: 50%;
padding: 0 20px;
}
.skills .row .col h3 {
font-size: 28px;
margin-bottom: 25px;
}
.skills .skill>span {
font-weight: bold;
display: block;
margin-bottom: 10px;
}
.skills .skill .skills-bar {
height: 8px;
width: 80%;
background-color: var(--heading-color);
position: relative;
margin-bottom: 30px;
}
.skills .skill .progress {
background-color: var(--main-color);
position: absolute;
top: 0;
left: 0;
height: 8px;
}
.skills .skill .skills-bar span {
position: absolute;
height: 40px;
width: 40px;
background-color: var(--main-color);
border-radius: 50px;
line-height: 40px;
text-align: center;
top: -17px;
right: -15px;
font-size: 14px;
}
.skills .skill .javascript {
width: 0%;
animation: 2s javascript forwards;
}
#keyframes javascript {
0% {
width: 0%;
}
100% {
width: 75%;
}
}
.skills .skill .htmlcss {
width: 0%;
animation: 2s htmlcss forwards;
}
#keyframes htmlcss {
0% {
width: 0%;
}
100% {
width: 89%;
}
}
.skills .skill .python {
width: 0%;
animation: 2s python forwards;
}
#keyframes python {
0% {
width: 0%;
}
100% {
width: 85%;
}
}
.skills .skill .mysql {
width: 0%;
animation: 2s mysql forwards;
}
#keyframes mysql {
0% {
width: 0%;
}
100% {
width: 70%;
}
}
.skills .skill .photoshop {
width: 0%;
animation: 2s photoshop forwards;
}
#keyframes photoshop {
0% {
width: 0%;
}
100% {
width: 90%;
}
}
.skills .skill .comunicacion {
width: 0%;
animation: 2s comunicacion forwards;
}
#keyframes comunicacion {
0% {
width: 0%;
}
100% {
width: 80%;
}
}
.skills .skill .trabajoequipo {
width: 0%;
animation: 2s trabajoequipo forwards;
}
#keyframes trabajoequipo {
0% {
width: 0%;
}
100% {
width: 75%;
}
}
.skills .skill .creatividad {
width: 0%;
animation: 2s creatividad forwards;
}
#keyframes creatividad {
0% {
width: 0%;
}
100% {
width: 65%;
}
}
.skills .skill .autodidacta {
width: 0%;
animation: 2s autodidacta forwards;
}
#keyframes autodidacta {
0% {
width: 0%;
}
100% {
width: 95%;
}
}
.skills .skill .productividad {
width: 0%;
animation: 2s productividad forwards;
}
#keyframes productividad {
0% {
width: 0%;
}
100% {
width: 90%;
}
}
/* Curriculum */
.estudios {
padding: 50px 20px;
}
.estudios .content-section {
max-width: 1100px;
margin: auto;
}
.estudios .row {
display: flex;
justify-content: space-between;
}
.estudios .row .col {
width: 49%;
padding: 0 20px;
}
.estudios .row .col h3 {
font-size: 28px;
margin-bottom: 25px;
}
.estudios .row .left {
border-right: 2px solid var(--container-color);
}
.estudios .row .right {
border-left: 2px solid var(--container-color);
}
.estudios .row .item {
padding: 25px;
margin-bottom: 30px;
background-color: var(--heading-color);
position: relative;
}
.estudios .row .item h4 {
font-size: 20px;
margin-bottom: 10px;
}
.estudios .row .item .institucion {
color: var(--main-color);
font-size: 18px;
font-weight: bold;
display: block;
}
.estudios .row .item .fecha {
display: block;
color: var(--main-color);
margin-bottom: 10px;
}
.estudios .row .item p {
line-height: 24px;
}
.estudios .row .left {
border-right: 2px solid var(--heading-color);
margin-right: 20px;
}
.estudios .row .right {
border-left: 2px solid var(--heading-color);
margin-left: 20px;
}
.estudios .row .item .connectori {
height: 2px;
background-color: var(--main-color);
width: 47px;
position: absolute;
top: 50%;
right: -47px;
z-index: 5;
}
.estudios .row .item .connectori .circlei {
display: block;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: var(--main-color);
float: right;
position: relative;
bottom: 4px;
}
.estudios .row .item .connectord {
height: 2px;
background-color: var(--main-color);
width: 47px;
position: absolute;
top: 50%;
left: -47px;
z-index: 5;
}
.estudios .row .item .connectord .circled {
display: block;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: var(--main-color);
float: left;
position: relative;
bottom: 4px;
}
/* Portfolio */
.portfolio-content {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.portfolio-box {
position: relative;
width: 100%;
height: 320px;
border-radius: 1rem;
overflow: hidden;
}
.portfolio-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.portfolio-overlay {
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(59, 40, 22, 0.7);
}
.portfolio-overlay h2 {
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 10px;
}
.portfolio-overlay .bx {
font-size: 24px;
padding: 10px;
background: var(--main-color);
color: var(--bg-color);
border-radius: 4px;
}
.portfolio-overlay .bx:hover {
background: #fd7051;
transition: 0.3s all linear;
}
.portfolio-box:hover .portfolio-overlay {
top: 0;
transition: 0.3s all ease;
}
/* Contact Form */
.contact-form {
max-width: 600px;
margin: auto;
width: 100%;
display: grid;
row-gap: 1rem;
}
.contact-form input,
.contact-form textarea {
border: none;
outline: none;
font-size: 0.9rem;
padding: 15px;
color: var(--bg-color);
background: var(--box-color);
border-radius: 0.4rem;
}
.contact-form .send-btn {
width: 120px;
font-size: 1rem;
letter-spacing: 1px;
font-weight: 500;
text-transform: uppercase;
padding: 12px;
background: var(--main-color);
cursor: pointer;
}
.contact-form .send-btn:hover {
background: #fd7051;
transition: 0.3s all linear;
}
/* Footer */
.footer {
display: flex;
align-items: center;
flex-direction: column;
row-gap: 1.4rem;
padding: 30px 0;
}
.footer p {
font-size: 0.9rem;
}
/* Scroll Top */
.scroll-top {
position: fixed;
bottom: -100%;
right: 1.5rem;
}
.scroll-top .bx {
padding: 8px;
font-size: 1.3rem;
color: var(--bg-color);
background: var(--box-color);
border-radius: 0.2rem;
}
.scroll-top .bx:hover {
background: var(--container-color);
transition: 0.3s;
}
.scroll-active {
bottom: 2rem;
transition: 0.3s;
}
/* Responsive */
#media (max-width:990px) {
.container {
margin: 0 auto;
width: 90%;
}
}
#media (max-width:892px) {
section {
padding: 2rem 0;
}
.nav {
padding: 12px 0;
}
.heading {
font-size: 4rem;
}
.portfolio-box {
height: 257px;
}
}
#media (max-width:775px) {
.nav {
padding: 10px 0;
}
.logo {
font-size: 1.1rem;
}
.home {
min-height: 500px;
padding-top: 6rem;
}
.home-text h3 {
font-size: 1rem;
}
.home-text h2 {
font-size: 3rem;
line-height: 3.8rem;
}
.home-text p {
font-size: 0.825rem;
}
.skills {
padding: 10px 50px;
}
.skills .row .col h3 {
font-size: 1rem;
}
.estudios .content-section {
max-width: 600px;
margin: auto;
}
.portfolio-box {
height: 245px;
}
.menu-icon {
display: flex;
}
.navbar {
position: absolute;
top: 0;
right: -100%;
width: 300px;
height: 100vh;
background: var(--box-color);
display: flex;
flex-direction: column;
align-items: center;
padding: 50px 20px;
transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.open-menu {
right: 0;
transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.nav-link {
display: block;
margin: 1rem 0;
}
}
#media (max-width:635px) {
.about-content {
grid-template-columns: 1fr;
}
.about-data span {
font-size: 0.9rem;
}
.about-data h2 {
font-size: 1.7rem;
line-height: 2.3rem;
font-weight: 600;
margin: 0.8rem 0;
}
.about-text p {
font-size: 0.825rem;
margin-bottom: 1.3rem;
}
.estudios .row {
display: block;
}
.estudios .row .col {
width: 90%;
}
.estudios .row .right {
margin-left: 20px;
}
}
#media (max-width:450px) {
.home {
min-height: 485px;
padding-top: 5rem;
}
.home-img {
width: 120px;
height: 120px;
}
.home-img img {
width: 120px;
height: 160px;
}
.home-text h2 {
font-size: 2.1rem;
line-height: 3.2rem;
}
.home-text p br {
display: contents;
}
.heading {
font-size: 3rem;
}
.about-data h2 {
font-size: 1.5rem;
line-height: 2.1rem;
margin: 0.6rem 0;
}
.skills .row {
display: block;
}
.skills .row .col {
width: 100%;
}
.skills .row .col .skills-bar {
width: 100%;
}
.portfolio-content {
grid-template-columns: 1fr;
}
}
#media (max-width:325px) {
.navbar {
width: 100%;
}
.portfolio-box {
height: 190px;
}
}
The routes on my Angular.json file:
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
}
}
}
}
},
First of all, If you are using Bootstrap npm package , then you shouldn't use cdn bootstrap link in index.html.
In angular.json, you should include both bootstrap css and js , on server object also to use it while creating build.Its now only in test object.
To override your style issue , you can use !important in you style.css where your style is overide by bootstrap classes
https://www.freecodecamp.org/news/how-to-add-bootstrap-css-framework-to-an-angular-application/
Related
I am having issues with my Wordpress website. Whenever I use the following CSS. my website crashes on the mobile version (but not on the computer) "A problem repeatedly occurred on https://..."
.about-text .iwt-text {
font-size: 16px;
line-height: 1.38;
max-width: 245px;
}
#js {
display: none !important;
}
.about-text .iwt-icon img {
width: 19px;
height: 23px;
margin-top: 3px;
}
.about-heading {
text-transform: uppercase;
margin: 0 0 5% 0% !important;
}
.header {
padding-top:40px;
padding-bottom:30px;
}
.header h1 {
color:#000640;
}
/** SPEAKERS **/
#speaker h2 {
font-size: 36px;
font-weight: normal;
line-height: 1.11;
margin-bottom: .5em;
letter-spacing: 2px;
color: #000640;
}
#media (min-width: 1000px) {
#speaker h2 {
font-size: 120px;
font-weight: bold;
line-height: .67;
position: absolute;
bottom: 4px;
margin: 0;
margin-left: -7rem;
letter-spacing: 7.54px;
opacity: .44;
color: #dee0f1 !important;
}
#speaker h3, #speaker h1, #speaker p {
color: #fff !important;
}
#speaker h3 {
margin-top: 3rem;
}
#speaker p {
margin-bottom: 7rem !important;
}
#speaker .row-bg-wrap::after {
position: absolute;
top: 0;
left: -35vw;
display: block;
width: 123vw;
height: 100%;
content: '';
background: url(https://albertablockchain.com/wp-content/uploads/2020/01/group-1219.svg) center / cover no-repeat;
}
#speaker {
margin-top: 4rem;
}
#speaker img {
margin-top: -4rem;
}
}
#speaker h3 {
margin-bottom: 20px;
}
#speaker h1 {
font-size: 34px;
font-weight: bold;
margin-bottom: 35px;
letter-spacing: 1.5px;
}
#media (min-width: 1000px) {
#speaker p {
max-width: 414px;
margin-bottom: 15%;
}
}
div.speaker-line img {
width: 100%;
}
div.single-speaker {
display: flex;
flex-flow: column;
justify-content: space-between;
height: 100%;
padding: 1.5rem;
}
div.single-speaker div.top {
display: flex;
align-items: flex-start;
}
div.single-speaker div.top img {
width: 82px !important;
}
#media (max-width: 1000px) {
div.single-speaker div.top {
flex-flow: column;
}
}
div.single-speaker img {
width: auto;
margin-right: 1.5rem;
}
div.single-speaker img + div > p {
padding: 0;
}
div.single-speaker p {
line-height: 1.57;
color: #333;
}
div.single-speaker a {
font-size: 12px;
line-height: 1.83;
color: #3c4bd8;
}
div.single-speaker h2 {
font-size: 16px;
line-height: 1.56;
margin-top: 1em;
letter-spacing: 1.07px;
color: #142098;
}
div.popup-trigger {
cursor: pointer;
transition: box-shadow .3s ease-in-out;
box-shadow: 0 25px 81px -37px rgba(24, 27, 61, .27) !important;
}
div.popup-trigger:hover {
box-shadow: 0 25px 81px -37px rgba(24, 27, 61, .7) !important;
}
div.popup-trigger div.vc_column-inner > div.wpb_wrapper {
display: grid;
grid-template-rows: auto 1fr;
height: 100%;
}
div.popup-trigger div.wpb_raw_code > div.wpb_wrapper {
height: 100%;
}
/** SPEAKERS GRID */
.speakers {
display: grid;
gap: 1.5rem;
}
.speakers .item {
display: grid;
grid-template-rows: auto 1fr;
transition: box-shadow .3s ease-in-out;
border-radius: 4px;
background: #fff;
box-shadow: 0 25px 81px -37px rgba(24, 27, 61, .27);
}
.speakers .item.trigger {
cursor: pointer;
}
.speakers .item:hover {
box-shadow: 0 25px 81px -37px rgba(24, 27, 61, .7);
}
.speakers .item .img img {
width: 100%;
margin: 0;
}
#media (min-width: 1000px) {
.speakers {
grid-template-columns: repeat(3, 1fr);
}
}
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.speakers {
display: flex;
flex-wrap: wrap;
}
.speakers .item {
display: flex;
flex-flow: column;
flex-basis: 30%;
}
}
.speaker-modal {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
display: flex;
width: 100vw;
height: 100vh;
transform: scale(0);
pointer-events: none;
background: #fff;
}
.speaker-modal.active {
transform: scale(1);
pointer-events: all;
}
.speaker-modal .modal-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: top;
}
.speaker-modal div.modal-left {
overflow-y: auto;
max-height: 100%;
padding: 6rem;
}
#media (min-width: 1000px) {
.speaker-modal > div {
flex-basis: 50%;
}
.speaker-modal div.modal-left {
display: flex;
align-items: flex-start;
flex-flow: column;
justify-content: center;
}
}
#media (max-width: 1000px) {
.speaker-modal div.modal-image {
max-height: 50vh;
}
}
.speaker-modal div.modal-left::-webkit-scrollbar {
width: 0;
}
.speaker-modal .js-close-modal {
position: absolute;
top: 3rem;
right: 3rem;
display: flex;
align-items: center;
justify-content: center;
width: 51px;
height: 51px;
content: '';
cursor: pointer;
border-radius: 100%;
background: #fff;
}
.speaker-modal .js-close-modal::after {
position: absolute;
display: block;
width: 25px;
height: 25px;
content: '';
background: url(https://albertablockchain.com/wp-content/plugins/VC_Modal_Popup/img/cross.png) no-repeat center center;
filter: brightness(0);
}
.speaker-modal div.modal-left img {
width: 164px !important;
object-fit: contain;
}
.speaker-modal div.modal-left h2 {
font-size: 20px;
line-height: 1.25;
margin-bottom: .5em;
letter-spacing: 1px;
color: #142098;
}
.speaker-modal div.modal-left a {
font-size: 12px;
line-height: 1.83;
color: #3c4bd8;
}
.speaker-modal .modal-social {
display: flex;
align-items: center;
}
.speaker-modal .modal-social i {
font-size: 20px;
color: #142098;
}
#media (max-width: 1000px) {
.speaker-modal {
flex-flow: column-reverse;
}
.speaker-modal div.modal-left {
padding: 1.5rem;
}
.speaker-modal .js-close-modal {
top: 1.5rem;
right: 1.5rem;
}
}
And when I go to change the code from overflow y 'auto' to overflow y 'hidden' it starts working again. The only thing is that I need it to be auto, because I have a modal popup that comes up
I'm trying to make my page automatically go to scroll when the window is at a small height instead of trying to adjust to the height by getting squishy. I've tried different ways of using overflow, but I can't seem to find a way to make it scroll the page as a whole no matter where I put it. The codepen is here: CODEPEN Thank you in advance!
#import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Oleo+Script&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
a {
color: #8524C6;
text-decoration: none;
}
section {
width: 100%;
height: 100vh;
color: #fff;
background: linear-gradient(-45deg, #F5D0E4, #F6D5F2, #EAD5F6, #D9D5F6, #D5E1F6, #D5ECF6);
background-size: 400% 400%;
position: relative;
animation: change 10s ease-in-out infinite;
overflow: hidden;
align-items: center;
justify-content: center;
}
h1 {
display: flex;
align-items: center;
justify-content: center;
color: #000;
font-size: 1.3em;
font-family: 'Oleo Script', cursive, 'Helvetica', sans-serif;
letter-spacing: .07rem;
transform: translateY(15vh);
}
h1 span {
display: flex;
text-align: center;
vertical-align: middle;
}
h1:hover span {
animation: animate .5s infinite;
}
#keyframes animate {
0% {
transform: translateY(0)
}
50% {
transform: translateY(-30px)
}
100% {
transform: translateY(0)
}
}
h1 span:nth-child(1) {
animation-delay: 0s;
}
h1 span:nth-child(2) {
animation-delay: .1s;
}
h1 span:nth-child(3) {
animation-delay: .2s;
}
h2 {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
vertical-align: top;
color: #000;
font-size: .4rem;
font-family: 'Press Start 2P', cursive, serif;
text-transform: uppercase;
transform: translateY(15.5vh)
}
.dancing-hamsters {
display: flex;
position: relative;
margin: auto;
align-content: center;
width: 100%;
height: 1.3rem;
width: 5.1rem;
transform: translateY(18vh);
z-index: 1;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #d3d3d3;
align-content: center;
position: absolute;
top: 50%;
bottom: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
padding: 5px;
padding-right: 3%;
box-shadow: inset 0 0 10px #000;
}
.top-note {
/* display: flex; */
display: none;
font-family: 'Helvetica', sans-serif;
font-size: .65rem;
text-align: center;
justify-content: center;
align-items: center;
color: #000;
transform: translate(4%, -5%);
}
.box {
display: flex;
flex-direction: column;
background-color: #d3d3d3;
text-align: center;
justify-content: center;
align-items: center;
text-align: center;
transform: translateX(50%);
width: 1rem;
height: 1rem;
font-family: 'Press Start 2P', cursive, serif;
font-size: .5rem;
margin: 2rem;
}
img {
display: flex;
width: 85%;
height: 75%;
}
.container img {
cursor: url('https://i.postimg.cc/6338xsj2/oie-nr-M8-Ct-Mr-SPb-H.png'), auto;
}
.box-text {
margin-top: 10%;
cursor: url('https://i.postimg.cc/6338xsj2/oie-nr-M8-Ct-Mr-SPb-H.png'), auto;
}
.nav {
margin: auto;
text-align: center;
transform: translateY(70vh);
font-size: .5rem;
text-transform: uppercase;
line-height: .8rem;
}
.nav a {
color: #000;
font-family: 'Press Start 2P', cursive, serif;
text-shadow: 2px 2px 7px #8524C6;
}
footer {
margin: auto;
width: 100%;
height: 1rem;
font-family: Helvetica, sans-serif;
font-size: .75rem;
background-color: transparent;
border-top: 1px solid #fff;
text-align: center;
padding-top: 1rem;
bottom: 0;
transform: translateY(80vh);
}
#keyframes change {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
/* Media Queries */
#media screen and (min-width: 740px) {
h1 {
font-size: 3em;
transform: translateY(8vh);
word-spacing: 2em;
}
h2 {
font-size: 1rem;
transform: translateY(8vh);
}
.dancing-hamsters {
height: 2rem;
width: 9rem;
transform: translateY(10.5vh);
}
.container {
display: flex;
flex-direction: row;
}
.top-note {
display: none;
}
.box {
width: 15rem;
height: 15rem;
transform: translateX(15%);
font-size: .75rem;
}
.img {
width: 100%;
height: 100%;
}
.nav li {
margin: .5em;
display: inline;
text-align: center;
align-items: center;
justify-content: center;
font-size: .85rem;
}
.nav {
transform: translateY(64vh);
}
footer {
transform: translateY(75vh);
}
}
A quick solution will be to add min-height to the main section element:
section {
width: 100%;
height: 100vh;
min-height: 500px; // I just add 500px for demo
color: #fff;
background: linear-gradient(-45deg, #F5D0E4, #F6D5F2, #EAD5F6, #D9D5F6, #D5E1F6, #D5ECF6);
background-size: 400% 400%;
position: relative;
animation: change 10s ease-in-out infinite;
overflow: hidden;
align-items: center;
justify-content: center;
}
You have specified the height of the section, but with min-height you will guarantee that regardless of the screen height, your content will not get smaller than what you have set.
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!
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.
/*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.