How to apply a transition speed to a scaled image on hover? - css

I have a card in the snippet below. I'm trying to figure out how to apply a transition speed to the scaled image on hover. What I've tried isn't working.
I have an arrow icon at the base of the card with a transition speed applied. It is working fine. I've set the speed of the icon different so you can see the difference.
How do I apply a transition speed to the photo image being scaled on hover? (not the icon)
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
font-style: normal;
}
a {
color: #005fec;
}
a:hover {
text-decoration: underline;
}
h4 {
font-size: 1.25rem;
line-height: 1.75rem;
}
#media (min-width: 768px) {
h4 {
font-size: 1.75rem;
line-height: 2.25rem;
}
}
h4 + img {
margin-top: 3rem;
}
h6 {
font-size: 1rem;
line-height: 1.5rem;
}
.kicker {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.kicker--bold, .kicker--bold {
font-weight: 700;
}
.img-fluid {
width: 100%;
height: auto;
}
.next__cards {
display: flex;
flex-direction: column;
max-width: 1200px;
margin: 0 auto;
}
#media (min-width: 576px) {
.next__cards {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.next__card {
position: relative;
overflow: hidden;
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.16);
border-radius: 4px;
margin: 0 1.5rem 2rem;
}
.next__card--link {
display: flex;
flex-flow: row wrap;
width: 1.5rem;
}
.next__card--link-spacer {
transition: all 2s ease;
}
.next__card--link:hover .next__card--link-spacer {
flex-grow: 1;
}
.next__card--link ::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
#media (min-width: 576px) {
.next__card {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
}
.next__card:hover {
box-shadow: 0px 8px 12px rgba(25, 30, 36, 0.08);
}
.next__card img {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
transition: transform .2s;
}
.next__card:hover img.next__card-img {
transform: scale(1.1);
transform-origin: 50% 50%;
}
#media (min-width: 576px) {
.next__card {
max-width: 50%;
}
}
.next__card-content {
padding: 2.5rem;
}
.next__card-title {
margin: 1.5rem auto 2rem;
}
.next__card .kicker, .next__card-title {
padding: 0;
}
.next__card:hover .next__card-title {
color: #005fec;
}
.next__card-footer {
width: 100%;
}
#media (min-width: 992px) {
.next__card {
max-width: 376px;
}
.next__card:first-child {
margin-left: 0;
}
.next__card:last-child {
margin-right: 0;
}
}
<div class="next__cards">
<div class="next__card">
<img class="img-fluid next__card-img" src="https://www.nextiva.com/assets/jpg/case-study/xCase-Studies-Jersey-College-card.jpg.pagespeed.ic.Ai7henX86J.jpg" alt="">
<div class="next__card-content">
<h6 class="kicker kicker--bold">customer story</h6>
<h4 class="next__card-title">
See how EagleRider switched phone providers easily
</h4>
<div class="next__card-footer">
<a class="next__card--link" target="_blank" href="#">
<span class="next__card--link-spacer"></span>
<img src="https://www.nextiva.com/assets/svg/arrow-right.svg" alt="right arrow">
</a>
</div>
</div>
</div>
</div>

Altering the transition on the img does work. But of course we need to make sure we pick the right image.
The scaleable img can be selected and the transition altered in this styling:
.next__card img {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
transition: transform 3s; /* changed from .2s */
}
Here's the altered snippet that does that:
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
font-style: normal;
}
a {
color: #005fec;
}
a:hover {
text-decoration: underline;
}
h4 {
font-size: 1.25rem;
line-height: 1.75rem;
}
#media (min-width: 768px) {
h4 {
font-size: 1.75rem;
line-height: 2.25rem;
}
}
h4+img {
margin-top: 3rem;
}
h6 {
font-size: 1rem;
line-height: 1.5rem;
}
.kicker {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.kicker--bold,
.kicker--bold {
font-weight: 700;
}
.img-fluid {
width: 100%;
height: auto;
}
.next__cards {
display: flex;
flex-direction: column;
max-width: 1200px;
margin: 0 auto;
}
#media (min-width: 576px) {
.next__cards {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.next__card {
position: relative;
overflow: hidden;
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.16);
border-radius: 4px;
margin: 0 1.5rem 2rem;
}
.next__card--link {
display: flex;
flex-flow: row wrap;
width: 1.5rem;
}
.next__card--link-spacer {
transition: all 2s ease;
}
.next__card--link:hover .next__card--link-spacer {
flex-grow: 1;
}
.next__card--link ::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
#media (min-width: 576px) {
.next__card {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
}
.next__card:hover {
box-shadow: 0px 8px 12px rgba(25, 30, 36, 0.08);
}
.next__card img {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
transition: transform 3s;
/* changed from .2s */
}
.next__card:hover img.next__card-img {
transform: scale(1.1);
transform-origin: 50% 50%;
}
#media (min-width: 576px) {
.next__card {
max-width: 50%;
}
}
.next__card-content {
padding: 2.5rem;
}
.next__card-title {
margin: 1.5rem auto 2rem;
}
.next__card .kicker,
.next__card-title {
padding: 0;
}
.next__card:hover .next__card-title {
color: #005fec;
}
.next__card-footer {
width: 100%;
}
#media (min-width: 992px) {
.next__card {
max-width: 376px;
}
.next__card:first-child {
margin-left: 0;
}
.next__card:last-child {
margin-right: 0;
}
}
<div class="next__cards">
<div class="next__card">
<img class="img-fluid next__card-img" src="https://www.nextiva.com/assets/jpg/case-study/xCase-Studies-Jersey-College-card.jpg.pagespeed.ic.Ai7henX86J.jpg" alt="">
<div class="next__card-content">
<h6 class="kicker kicker--bold">customer story</h6>
<h4 class="next__card-title">
See how EagleRider switched phone providers easily
</h4>
<div class="next__card-footer">
<a class="next__card--link" target="_blank" href="#">
<span class="next__card--link-spacer"></span>
<img src="https://www.nextiva.com/assets/svg/arrow-right.svg" alt="right arrow">
</a>
</div>
</div>
</div>
</div>
UPDATE: If it is required that the img not only scales but also 'breaks out' of its parent, so that it can all be seen without cropping then make the parent have overflow visible.
Here is the altered snippet:
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
font-style: normal;
}
a {
color: #005fec;
}
a:hover {
text-decoration: underline;
}
h4 {
font-size: 1.25rem;
line-height: 1.75rem;
}
#media (min-width: 768px) {
h4 {
font-size: 1.75rem;
line-height: 2.25rem;
}
}
h4+img {
margin-top: 3rem;
}
h6 {
font-size: 1rem;
line-height: 1.5rem;
}
.kicker {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.kicker--bold,
.kicker--bold {
font-weight: 700;
}
.img-fluid {
width: 100%;
height: auto;
}
.next__cards {
display: flex;
flex-direction: column;
max-width: 1200px;
margin: 0 auto;
}
#media (min-width: 576px) {
.next__cards {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.next__card {
position: relative;
overflow: hidden;
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.16);
border-radius: 4px;
margin: 0 1.5rem 2rem;
}
.next__card--link {
display: flex;
flex-flow: row wrap;
width: 1.5rem;
}
.next__card--link-spacer {
transition: all 2s ease;
}
.next__card--link:hover .next__card--link-spacer {
flex-grow: 1;
}
.next__card--link ::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
#media (min-width: 576px) {
.next__card {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
}
.next__card {
overflow: visible;
}
.next__card:hover {
box-shadow: 0px 8px 12px rgba(25, 30, 36, 0.08);
}
.next__card img {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
transition: transform 3s;
/* changed from .2s */
}
.next__card:hover img.next__card-img {
transform: scale(1.1);
transform-origin: 50% 50%;
}
#media (min-width: 576px) {
.next__card {
max-width: 50%;
}
}
.next__card-content {
padding: 2.5rem;
}
.next__card-title {
margin: 1.5rem auto 2rem;
}
.next__card .kicker,
.next__card-title {
padding: 0;
}
.next__card:hover .next__card-title {
color: #005fec;
}
.next__card-footer {
width: 100%;
}
#media (min-width: 992px) {
.next__card {
max-width: 376px;
}
.next__card:first-child {
margin-left: 0;
}
.next__card:last-child {
margin-right: 0;
}
}
<div class="next__cards">
<div class="next__card">
<img class="img-fluid next__card-img" src="https://www.nextiva.com/assets/jpg/case-study/xCase-Studies-Jersey-College-card.jpg.pagespeed.ic.Ai7henX86J.jpg" alt="">
<div class="next__card-content">
<h6 class="kicker kicker--bold">customer story</h6>
<h4 class="next__card-title">
See how EagleRider switched phone providers easily
</h4>
<div class="next__card-footer">
<a class="next__card--link" target="_blank" href="#">
<span class="next__card--link-spacer"></span>
<img src="https://www.nextiva.com/assets/svg/arrow-right.svg" alt="right arrow">
</a>
</div>
</div>
</div>
</div>

Related

Angular - Having trouble with my .css styles after installing bootstrap

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/

Wordpress is crashing on Mobile due to CSS issue

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

How do I show elements on mobile devices and tablets only with :not(hover)

I want the elements to show up on mobile devices but not on desktop as the element are controlled with a :hover. On mobile devices obviously you can't* :hover so I need them to show up. The problem is that even on the smaller widths, if one shrinks their desktop screen down to the smaller widths then the elements show up. I can't single out every device on the media queries so my elements only show up on mobile devices.
*EDIT: changed can to can't
main class="animate__animated animate__slideInDown" id="cards">
<a href="signup.html">
<section class="cards__med">
<div class="cards__flexchild">
<h1 class="cards__med-title">Medellín</h1>
<img class="cards__medimage" src="img/medellin.jpeg" alt="medellin">
<h2 class="cards__texthead" id="texthead_media640">The City of Eternal Spring</h2>
<h2 class="choice" id="choice-media640">I choose Medellín!</h2>
</div>
</section>
</a>
<a href="signup.html"><section class="cards__bog">
<div>
<h1 class="cards__bog-title">Bogotá</h1>
<img class="cards__bogimage" src="img/bogota.jpg" alt="bogota">
<h1 class="cards__texthead">The City where the Past and Present Meet</h1>
<!-- Choose City -->
</div>
<h2 class="choice">I choose Bogotá!</h2>
</section></a>
<a href="signup.html"><section class="cards__san">
<div>
<h1 class="cards__san-title">Santa Marta</h1>
<img class="cards__santaimage" src="img/santa.jpg" alt="santa">
<h1 class="cards__texthead" id="texthead__media1024">The Destination with Everything</h1>
<!-- Choose City -->
</div>
<h2 class="choice" id="choice_santa">I choose Santa Marta!</h2>
</section></a>
</main>
#cards {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
text-align: center;
font-family: 'Roboto', sans-serif;
margin-top: 3rem;
/* animation: slide 1s; */
/* transform: translateY(10rem); */
}
.cards__texthead {
width: 100%;
margin-top: 0;
padding-top: 10px;
padding-bottom: 10px;
background: white;
color: var(--main-color);
font-family: 'Roboto', sans-serif;
font-size: 1.4rem;
}
.cards__med {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-preferred-size: 30rem;
flex-basis: 30rem;
-webkit-box-flex: .1;
-ms-flex-positive: .1;
flex-grow: .1;
border: 4px solid black;
background: rgba(255, 236, 0, 0.65);
height: 35rem;
width: 30rem;
animation: med_slide 1.25s;
}
.cards__med:hover {
background: rgba(255, 236, 0, 0.8);
}
.cards__med-title {
width: 100%;
margin-top: 0;
padding-top: 8px;
padding-bottom: 8px;
background: white;
color: var(--main-color);
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
}
.cards__medimage {
width: 412px;
height: 220px;
margin-bottom: 2rem;
}
.cards__med:not(:hover) .choice {
display: none;
}
.choice {
color: white;
background: var(--main-color);
font-size: 2.25rem;
margin-top: 4.25rem;
width: 75%;
border: 1px solid white;
margin-left: 3.75rem;
}
.cards__med-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 1rem;
background: var(--main-color);
color:white;
font-family: 'Roboto', sans-serif;
width: 70%;
font-weight: 700;
font-size: 1.25rem;
text-decoration: none;
margin-top: 12%;
margin-left: 14%;
}
.cards__bog {
border: 4px solid black;
background: rgba(0, 17, 223, 0.65);
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: .1;
-ms-flex-positive: .1;
flex-grow: .1;
-ms-flex-preferred-size: 30rem;
flex-basis: 30rem;
height: 35rem;
width: 30rem;
animation: bog_slide 1.5s;
}
.cards__bog:hover {
background: rgba(0, 17, 223, 0.8);
}
.cards__bog-title {
width: 100%;
margin-top: 0;
padding-top: 8px;
padding-bottom: 8px;
background: white;
color: var(--main-color);
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
}
.cards__bog-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 1rem;
background: var(--main-color);
color:white;
font-family: 'Roboto', sans-serif;
width: 70%;
font-weight: 700;
font-size: 1.25rem;
text-decoration: none;
margin-top: 12%;
margin-left: 14%;
}
.cards__bogimage {
width: 412px;
height: 220px;
margin-bottom: 2rem;
}
.cards__bog:not(:hover) .choice {
display: none;
}
.cards__san {
border: 4px solid black;
background: rgba(255, 0, 8, 0.65);
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: .1;
-ms-flex-positive: .1;
flex-grow: .1;
-ms-flex-preferred-size: 30rem;
flex-basis: 30rem;
height: 35rem;
width: 30rem;
animation: san_slide 2s;
}
.cards__san:hover {
background: rgba(255, 0, 8, 0.8);
}
.cards__san-title {
width: 100%;
margin-top: 0;
padding-top: 8px;
padding-bottom: 8px;
background: white;
color: var(--main-color);
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
}
.cards__santaimage {
width: 412px;
height: 220px;
margin-bottom: 2rem;
}
.cards__san:not(:hover) .choice {
display: none;
}
a {
text-decoration: none;
color: black;
}
#keyframes med_slide {
from {
transform: translateY(-100rem);
}
to {
transform: translateY(1.55rem);
}
}
#keyframes bog_slide {
from {
transform: translateY(-80rem);
}
to {
transform: translateY(1.5rem);
}
}
#keyframes san_slide {
from {
transform: translateY(-60rem);
}
to {
transform: translateY(1.5rem);
}
}
#media (hover: none) {
.cards__san:hover .choice,
.cards__med:hover .choice,
.cards__bog:hover .choice {
display: inherit;
}
}
#media only screen
and (min-width: 1366px)
and (max-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1.5) {
.cards__med:not(:hover) .choice,
.cards__bog:not(:hover) .choice,
.cards__san:not(:hover) .choice {
display: inherit;
}
}
#media screen and (max-width: 1450px) {
.cards__medimage,
.cards__bogimage,
.cards__santaimage {
width: 330px;
height: 220px;
}
.cards__med,
.cards__bog,
.cards__san {
height: 32rem;
width: 27rem;
margin-bottom: 4rem;
border: 3px black solid;
margin-left: .5rem;
}
#choice_santa {
margin-top: 4.5rem;
font-size: 2rem;
}
}
#media screen and (max-width: 1300px) {
body {
background-attachment: scroll;
}
header {
text-align: center;
}
.title {
margin: 0;
margin-top: 2rem;
border: 2px black solid;
display: inline-block;
text-align: center;
}
#cards {
display: flex;
flex-direction: row;
align-items: center;
}
.cards__medimage,
.cards__bogimage,
.cards__santaimage {
width: 310px;
height: 200px;
}
.cards__med,
.cards__bog,
.cards__san {
height: 32rem;
width: 21.5rem;
margin-bottom: 4rem;
border: 3px black solid;
/*👉margin-left: .5rem;👈*/
}
.choice {
margin-top: 0;
margin-left: 2.75rem;
}
#choice-media640 {
margin-top: 2.8rem ;
}
#choice_santa {
margin-top: 3.5rem;
}
}
#media screen and (max-width: 1199px) {
body {
background-attachment: scroll;
}
header {
text-align: center;
}
.title {
margin: 0;
margin-top: 2rem;
border: 2px black solid;
display: inline-block;
text-align: center;
}
#cards {
display: flex;
flex-direction: row;
align-items: center;
}
.cards__medimage,
.cards__bogimage,
.cards__santaimage {
width: 290px;
height: 180px;
}
.cards__med,
.cards__bog,
.cards__san {
height: 32rem;
width: 19rem;
margin-bottom: 4rem;
border: 3px black solid;
/*👉margin-left: .5rem;👈*/
}
.cards__med:not(:hover) .choice,
.cards__bog:not(:hover) .choice,
.cards__san:not(:hover) .choice {
display: inherit;
}
.choice {
margin-top: 0;
margin-left: 2.75rem;
}
#choice-media640 {
margin-top: 2.8rem ;
}
#choice_santa {
margin-top: 1rem;
}
}
#media screen and (max-width: 1023px) {
body {
background-attachment: scroll;
}
header {
text-align: center;
}
.title {
margin: 0;
margin-top: 2rem;
border: 2px black solid;
display: inline-block;
text-align: center;
}
#cards {
display: flex;
flex-direction: column;
align-items: center;
}
.cards__medimage,
.cards__bogimage,
.cards__santaimage {
width: 310px;
height: 200px;
}
.cards__med,
.cards__bog,
.cards__san {
height: 32rem;
width: 21.5rem;
margin-bottom: 4rem;
border: 3px black solid;
/*👉margin-left: .5rem;👈*/
}
.cards__med:not(:hover) .choice,
.cards__bog:not(:hover) .choice,
.cards__san:not(:hover) .choice {
display: inherit;
}
.choice {
margin-top: 0;
margin-left: 2.75rem;
}
}
#media screen and (max-width: 400px) {
body {
background-attachment: scroll;
}
.title {
margin-top: 2rem;
/*👉width: 21.5rem;👈*/
border: 2px black solid;
display: inline-block;
}
#cards {
display: flex;
flex-direction: column;
}
.cards__medimage,
.cards__bogimage,
.cards__santaimage {
width: 230px;
height: 120px;
}
.cards__med,
.cards__bog,
.cards__san {
height: 29rem;
width: 17rem;
margin-bottom: 4rem;
border: 3px black solid;
margin-left: 0rem;
}
.cards__med:not(:hover) .choice,
.cards__bog:not(:hover) .choice,
.cards__san:not(:hover) .choice {
display: inherit;
}
.choice {
margin-top: 0;
margin-left: 2rem;
font-size: 1.75rem;
}
}
#media screen and (max-width: 300px) {
body {
background-attachment: scroll;
}
.title {
margin-top: 2rem;
/*👉width: 21.5rem;👈*/
border: 2px black solid;
display: inline-block;
}
#cards {
display: flex;
flex-direction: column;
}
.cards__medimage,
.cards__bogimage,
.cards__santaimage {
width: 230px;
height: 120px;
}
.cards__med,
.cards__bog,
.cards__san {
height: 29rem;
width: 17rem;
margin-bottom: 4rem;
border: 3px black solid;
margin-left: 0rem;
}
.cards__med:not(:hover) .choice,
.cards__bog:not(:hover) .choice,
.cards__san:not(:hover) .choice {
display: inherit;
}
.choice {
margin-top: 0;
margin-left: 2rem;
font-size: 1.75rem;
}
}
While as you say you cannot test for every single device (and it's an insecure thing to do anyway) you can test, as MDN puts it, to see if
the primary input mechanism can conveniently hover over elements.
I am not sure exactly how 'conveniently' is defined here, but MDN deems having to do a long touch as not in that category.
Here's their example as a snippet:
#media (hover: hover) {
a:hover {
background: yellow;
}
}
Try hovering over me!
ADDITION:
To stop the choice elements showing when the user is on a device that has a conveniently usable hover (as per the browser's understanding of 'convenient') then we need to stop the display of choice whatever the width of the screen.
#media (hover: hover) {
.cards__med:not(:hover) .choice,
.cards__bog:not(:hover) .choice,
.cards__san:not(:hover) .choice {
display: none;
}
}
This says: when the user can hover don't show the choice element. We need to put this after all the other media settings so it overwrites anything they may have set for the display of choice. In this snippet it is therefore right at the end:
#cards {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
text-align: center;
font-family: 'Roboto', sans-serif;
margin-top: 3rem;
/* animation: slide 1s; */
/* transform: translateY(10rem); */
}
.cards__texthead {
width: 100%;
margin-top: 0;
padding-top: 10px;
padding-bottom: 10px;
background: white;
color: var(--main-color);
font-family: 'Roboto', sans-serif;
font-size: 1.4rem;
}
.cards__med {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-preferred-size: 30rem;
flex-basis: 30rem;
-webkit-box-flex: .1;
-ms-flex-positive: .1;
flex-grow: .1;
border: 4px solid black;
background: rgba(255, 236, 0, 0.65);
height: 35rem;
width: 30rem;
animation: med_slide 1.25s;
}
.cards__med:hover {
background: rgba(255, 236, 0, 0.8);
}
.cards__med-title {
width: 100%;
margin-top: 0;
padding-top: 8px;
padding-bottom: 8px;
background: white;
color: var(--main-color);
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
}
.cards__medimage {
width: 412px;
height: 220px;
margin-bottom: 2rem;
}
.cards__med:not(:hover) .choice {
display: none;
}
.choice {
color: white;
background: var(--main-color);
font-size: 2.25rem;
margin-top: 4.25rem;
width: 75%;
border: 1px solid white;
margin-left: 3.75rem;
}
.cards__med-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 1rem;
background: var(--main-color);
color:white;
font-family: 'Roboto', sans-serif;
width: 70%;
font-weight: 700;
font-size: 1.25rem;
text-decoration: none;
margin-top: 12%;
margin-left: 14%;
}
.cards__bog {
border: 4px solid black;
background: rgba(0, 17, 223, 0.65);
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: .1;
-ms-flex-positive: .1;
flex-grow: .1;
-ms-flex-preferred-size: 30rem;
flex-basis: 30rem;
height: 35rem;
width: 30rem;
animation: bog_slide 1.5s;
}
.cards__bog:hover {
background: rgba(0, 17, 223, 0.8);
}
.cards__bog-title {
width: 100%;
margin-top: 0;
padding-top: 8px;
padding-bottom: 8px;
background: white;
color: var(--main-color);
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
}
.cards__bog-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 1rem;
background: var(--main-color);
color:white;
font-family: 'Roboto', sans-serif;
width: 70%;
font-weight: 700;
font-size: 1.25rem;
text-decoration: none;
margin-top: 12%;
margin-left: 14%;
}
.cards__bogimage {
width: 412px;
height: 220px;
margin-bottom: 2rem;
}
.cards__bog:not(:hover) .choice {
display: none;
}
.cards__san {
border: 4px solid black;
background: rgba(255, 0, 8, 0.65);
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: .1;
-ms-flex-positive: .1;
flex-grow: .1;
-ms-flex-preferred-size: 30rem;
flex-basis: 30rem;
height: 35rem;
width: 30rem;
animation: san_slide 2s;
}
.cards__san:hover {
background: rgba(255, 0, 8, 0.8);
}
.cards__san-title {
width: 100%;
margin-top: 0;
padding-top: 8px;
padding-bottom: 8px;
background: white;
color: var(--main-color);
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
}
.cards__santaimage {
width: 412px;
height: 220px;
margin-bottom: 2rem;
}
.cards__san:not(:hover) .choice {
display: none;
}
a {
text-decoration: none;
color: black;
}
#keyframes med_slide {
from {
transform: translateY(-100rem);
}
to {
transform: translateY(1.55rem);
}
}
#keyframes bog_slide {
from {
transform: translateY(-80rem);
}
to {
transform: translateY(1.5rem);
}
}
#keyframes san_slide {
from {
transform: translateY(-60rem);
}
to {
transform: translateY(1.5rem);
}
}
#media (hover: none) {
.cards__san:hover .choice,
.cards__med:hover .choice,
.cards__bog:hover .choice {
display: inherit;
}
}
#media only screen
and (min-width: 1366px)
and (max-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1.5) {
.cards__med:not(:hover) .choice,
.cards__bog:not(:hover) .choice,
.cards__san:not(:hover) .choice {
display: inherit;
}
}
#media screen and (max-width: 1450px) {
.cards__medimage,
.cards__bogimage,
.cards__santaimage {
width: 330px;
height: 220px;
}
.cards__med,
.cards__bog,
.cards__san {
height: 32rem;
width: 27rem;
margin-bottom: 4rem;
border: 3px black solid;
margin-left: .5rem;
}
#choice_santa {
margin-top: 4.5rem;
font-size: 2rem;
}
}
#media screen and (max-width: 1300px) {
body {
background-attachment: scroll;
}
header {
text-align: center;
}
.title {
margin: 0;
margin-top: 2rem;
border: 2px black solid;
display: inline-block;
text-align: center;
}
#cards {
display: flex;
flex-direction: row;
align-items: center;
}
.cards__medimage,
.cards__bogimage,
.cards__santaimage {
width: 310px;
height: 200px;
}
.cards__med,
.cards__bog,
.cards__san {
height: 32rem;
width: 21.5rem;
margin-bottom: 4rem;
border: 3px black solid;
/*👉margin-left: .5rem;👈*/
}
.choice {
margin-top: 0;
margin-left: 2.75rem;
}
#choice-media640 {
margin-top: 2.8rem ;
}
#choice_santa {
margin-top: 3.5rem;
}
}
#media screen and (max-width: 1199px) {
body {
background-attachment: scroll;
}
header {
text-align: center;
}
.title {
margin: 0;
margin-top: 2rem;
border: 2px black solid;
display: inline-block;
text-align: center;
}
#cards {
display: flex;
flex-direction: row;
align-items: center;
}
.cards__medimage,
.cards__bogimage,
.cards__santaimage {
width: 290px;
height: 180px;
}
.cards__med,
.cards__bog,
.cards__san {
height: 32rem;
width: 19rem;
margin-bottom: 4rem;
border: 3px black solid;
/*👉margin-left: .5rem;👈*/
}
.cards__med:not(:hover) .choice,
.cards__bog:not(:hover) .choice,
.cards__san:not(:hover) .choice {
display: inherit;
}
.choice {
margin-top: 0;
margin-left: 2.75rem;
}
#choice-media640 {
margin-top: 2.8rem ;
}
#choice_santa {
margin-top: 1rem;
}
}
#media screen and (max-width: 1023px) {
body {
background-attachment: scroll;
}
header {
text-align: center;
}
.title {
margin: 0;
margin-top: 2rem;
border: 2px black solid;
display: inline-block;
text-align: center;
}
#cards {
display: flex;
flex-direction: column;
align-items: center;
}
.cards__medimage,
.cards__bogimage,
.cards__santaimage {
width: 310px;
height: 200px;
}
.cards__med,
.cards__bog,
.cards__san {
height: 32rem;
width: 21.5rem;
margin-bottom: 4rem;
border: 3px black solid;
/*👉margin-left: .5rem;👈*/
}
.cards__med:not(:hover) .choice,
.cards__bog:not(:hover) .choice,
.cards__san:not(:hover) .choice {
display: inherit;
}
.choice {
margin-top: 0;
margin-left: 2.75rem;
}
}
#media screen and (max-width: 400px) {
body {
background-attachment: scroll;
}
.title {
margin-top: 2rem;
/*👉width: 21.5rem;👈*/
border: 2px black solid;
display: inline-block;
}
#cards {
display: flex;
flex-direction: column;
}
.cards__medimage,
.cards__bogimage,
.cards__santaimage {
width: 230px;
height: 120px;
}
.cards__med,
.cards__bog,
.cards__san {
height: 29rem;
width: 17rem;
margin-bottom: 4rem;
border: 3px black solid;
margin-left: 0rem;
}
.cards__med:not(:hover) .choice,
.cards__bog:not(:hover) .choice,
.cards__san:not(:hover) .choice {
display: inherit;
}
.choice {
margin-top: 0;
margin-left: 2rem;
font-size: 1.75rem;
}
}
#media screen and (max-width: 300px) {
body {
background-attachment: scroll;
}
.title {
margin-top: 2rem;
/*👉width: 21.5rem;👈*/
border: 2px black solid;
display: inline-block;
}
#cards {
display: flex;
flex-direction: column;
}
.cards__medimage,
.cards__bogimage,
.cards__santaimage {
width: 230px;
height: 120px;
}
.cards__med,
.cards__bog,
.cards__san {
height: 29rem;
width: 17rem;
margin-bottom: 4rem;
border: 3px black solid;
margin-left: 0rem;
}
.cards__med:not(:hover) .choice,
.cards__bog:not(:hover) .choice,
.cards__san:not(:hover) .choice {
display: inherit;
}
.choice {
margin-top: 0;
margin-left: 2rem;
font-size: 1.75rem;
}
}
#media (hover: hover) {
.cards__med:not(:hover) .choice,
.cards__bog:not(:hover) .choice,
.cards__san:not(:hover) .choice {
display: none;
}
}
<main class="animate__animated animate__slideInDown" id="cards">
<a href="signup.html">
<section class="cards__med">
<div class="cards__flexchild">
<h1 class="cards__med-title">Medellín</h1>
<img class="cards__medimage" src="img/medellin.jpeg" alt="medellin">
<h2 class="cards__texthead" id="texthead_media640">The City of Eternal Spring</h2>
<h2 class="choice" id="choice-media640">I choose Medellín!</h2>
</div>
</section>
</a>
<a href="signup.html"><section class="cards__bog">
<div>
<h1 class="cards__bog-title">Bogotá</h1>
<img class="cards__bogimage" src="img/bogota.jpg" alt="bogota">
<h1 class="cards__texthead">The City where the Past and Present Meet</h1>
<!-- Choose City -->
</div>
<h2 class="choice">I choose Bogotá!</h2>
</section></a>
<a href="signup.html"><section class="cards__san">
<div>
<h1 class="cards__san-title">Santa Marta</h1>
<img class="cards__santaimage" src="img/santa.jpg" alt="santa">
<h1 class="cards__texthead" id="texthead__media1024">The Destination with Everything</h1>
<!-- Choose City -->
</div>
<h2 class="choice" id="choice_santa">I choose Santa Marta!</h2>
</section></a>
</main>

responsive positioning of svg imgages

I am trying to position two SVG images (Tobias-Raketfart.svg class="turbotobias-shake turbotobias-rocket-img" & TurboTobias-Blue-clouds.svg class="turbotobias-smoke"). Everytime I come up with a solution it is nowhere near being responsive.
I've been playing around with position: absolute; and then positioning with bottom and right. This makes the result looks good on my PC monitor but awful on pretty much any other screen. What can I do in order to position the two SVG images?
Mobile mockup of end result I am trying to achieve
PC mockup of end result I am trying to achieve
HTML:
<body>
<div class='turbotobias-hero-section-wrapper'>
<div class='turbotobias-row'>
<div class='turbotobias-column'>
<div class='turbotobias-first-column'>
<h1 class="turbotobias-fp-h1">Vil du have
<div class="turbotobias-h1-enhanced">raketfart</div>
<div class="turbotobias-h1-smaller">på din hjemmeside?</div>
</h1>
<span class="turbotobias-sub-h1">Jeg ta'r din hjemmeside til skyerne!</span>
</div>
</div>
<div class='turbotobias-column'>
<div class='turbotobias-second-column'>
<img src="https://turbotobias.dk/wp-content/uploads/2019/07/Turno-Tobias-Raketfart.svg" alt="" class="turbotobias-shake turbotobias-rocket-img">
<img src="https://turbotobias.dk/wp-content/uploads/2019/07/TurboTobias-Blue-clouds.svg" alt="" class="turbotobias-smoke"></img>
</div>
</div>
<div class="turbotobias-divider-clouds"></div>
</div>
</div>
</body>
CSS:
body {
background: #fff;
color: #333333;
margin: 0;
box-sizing: border-box;
font-family: open sans,Arial,sans-serif;
font-size: 14px;
overflow: hidden;
word-break: break-word;
}
.turbotobias-hero-section-wrapper {
height: 100vh;
background: url(https://turbotobias.dk/wp-content/uploads/2019/07/Light-Above-clouds-HD-TurboTobias.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
.turbotobias-column .turbotobias-first-column {
display: flex;
align-self: center;
align-items: center;
flex-direction: column;
}
.turbotobias-first-column {
font-weight: 700;
text-transform: uppercase;
background-color: rgba(0,0,0,0);
border-left-width: 10px;
border-left-style: solid;
border-left-color: #0082a4;
padding-top: 20px!important;
padding-bottom: 20px!important;
padding-left: 20px!important;
margin-top: 0px!important;
display: flex;
align-items: center;
}
.turbotobias-h1-enhanced {
font-weight: 900;
font-size: 120%;
}
.turbotobias-h1-smaller {
font-size: 70%;
}
#media (min-width: 980px) {
h1.turbotobias-fp-h1 {
padding-bottom: 0px;
margin-bottom: 0px;
margin-top: 0px;
font-weight: 700;
font-size: 60px !important;
color: #303030!important;
line-height: 1em;
text-transform: uppercase;
}
}
#media (max-width: 979px) {
h1.turbotobias-fp-h1 {
padding-bottom: 0px;
margin-bottom: 0px;
margin-top: 0px;
font-weight: 700;
font-size: 33px !important;
color: #303030!important;
line-height: 1em;
text-transform: uppercase;
}
}
.turbotobias-sub-h1 {
font-size: 24px;
color: #303030;
font-weight: 400;
font-family: open sans,Arial,sans-serif;
text-transform: uppercase;
text-align: left;
}
.turbotobias-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 80%;
max-width: 1080px;
height: 100vh;
margin: auto;
}
.turbotobias-column {
display: flex;
flex-direction: column;
flex-basis: 100%;
}
.turbotobias-smoke {
position:absolute;
bottom: 0;
width: 470px;
height: auto;
z-index: 9;
right: 30%;
}
.turbotobias-rocket-img {
position: absolute;
bottom: 30%;
right: 36%;
width: 180px;
height: auto;
z-index: 11;
}
.turbotobias-divider-clouds {
background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
background-size: cover;
background-position: center top;
bottom: 0;
left: 0;
height: 100px;
position: absolute;
width: 100%;
z-index: 10;
}
#media screen and (min-width: 800px) {
.turbotobias-column {
align-self: center;
flex: 1
}
}
#media (max-width: 980px) {
.turbotobias-row {
padding: 30px 0;
}
}
Code snippet
Some changes have been made. The question is, why does not the cloud appear? - Light-Above-clouds-HD-TurboTobias.jpg
Div with the class turbotobias-second-column should always center two svg and you should only control it.
body {
background: #fff;
color: #333333;
margin: 0;
font-family: open sans, Arial, sans-serif;
font-size: 14px;
overflow: hidden;
}
.turbotobias-hero-section-wrapper {
height: 100vh;
background: url(https://turbotobias.dk/wp-content/uploads/2019/07/Light-Above-clouds-HD-TurboTobias.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
.turbotobias-first-column {
text-transform: uppercase;
border-left: 10px solid #0082a4;
padding: 20px 0 20px 20px;
margin-top: 0;
font-weight: 700;
}
#media (max-width: 799px) {
.turbotobias-first-column {
text-align: center;
}
}
.turbotobias-fp-h1 {
margin: 0 0 20px 0;
font-size: calc(12px + 2vw);
font-weight: 600;
line-height: 90%;
}
.turbotobias-h1-enhanced {
font-size: calc(24px + 2vw);
font-weight: 900;
line-height: 100%;
}
.turbotobias-h1-smaller {
font-size: calc(17px + 1vw);
font-weight: 600;
}
.turbotobias-sub-h1 {
font-size: calc(14px + 0.5vw);
font-weight: 400;
}
.turbotobias-sub-h1 {
color: #303030;
}
.turbotobias-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 80%;
max-width: 1080px;
height: 100vh;
margin: auto;
}
.turbotobias-column {
display: flex;
flex-direction: column;
flex-basis: 100%;
}
.turbotobias-second-column {
display: flex;
justify-content: center;
max-width: 470px;
margin: auto;
}
.turbotobias-rocket-img {
bottom: 30%;
width: 180px;
height: auto;
z-index: 11;
}
.turbotobias-smoke {
position: absolute;
bottom: 0;
max-width: 470px;
height: auto;
z-index: 9;
}
.turbotobias-shake {
animation: shake 2s infinite cubic-bezier(0.79, 0.04, 0.39, 0.81) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
#media (max-width: 790px) {
.turbotobias-rocket-img {
z-index: 2;
max-width: 420px;
}
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(1px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-2px, 0, 0);
}
40%,
60% {
transform: translate3d(2px, 0, 0);
}
}
.turbotobias-divider-clouds {
background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
background-size: cover;
background-position: center top;
bottom: 0;
left: 0;
height: 100px;
position: absolute;
width: 100%;
z-index: 10;
}
#media (min-width: 800px) {
.turbotobias-column {
align-self: center;
flex: 1
}
}
#media (max-width: 980px) {
.turbotobias-row {
padding: 30px 0;
}
}
<div class='turbotobias-hero-section-wrapper'>
<div class='turbotobias-row'>
<div class='turbotobias-column'>
<div class='turbotobias-first-column'>
<h1 class="turbotobias-fp-h1">Vil du have
<div class="turbotobias-h1-enhanced">raketfart</div>
<div class="turbotobias-h1-smaller">på din hjemmeside?</div>
</h1>
<span class="turbotobias-sub-h1">Jeg ta'r din hjemmeside til skyerne!</span>
</div>
</div>
<div class='turbotobias-column'>
<div class='turbotobias-second-column'>
<img src="https://turbotobias.dk/wp-content/uploads/2019/07/Turno-Tobias-Raketfart.svg" alt=""
class="turbotobias-shake turbotobias-rocket-img">
<img src="https://turbotobias.dk/wp-content/uploads/2019/07/TurboTobias-Blue-clouds.svg" alt=""
class="turbotobias-smoke"></img>
</div>
</div>
<div class="turbotobias-divider-clouds"></div>
</div>
</div>

Responsive Design Fail

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!

Resources