Develop Reference

The flipping cards on click function doesn't work on mobile

Its simply a 9 card game which you have to get 3 aces to win, i am using a click event listener to flip the cards and then comparing them together, it works fine on pc while on mobile the cards donot flip.
Here is the code.
https://codepen.io/ahmedroushdi/pen/JjZQEwJ
The images doesnot show up on codepen because they are saved on pc but the cards is flipped.
Well, I have tried another way to flip the cards in the old version i just change the image but now i have positioned them on top of each other and when you click on the card where its backface is hidden the other card "face" shows up and i have adjusted the -webkit- transform for it and no result also i have added another event listener for the touch effect on mobile phones and it didn't make any difference so i don't have any other solutions.
var cards = document.querySelectorAll(".card-toFlip");
let cardOne, cardTwo, cardThree;
function flipCard(e) {
let clickedCard = e.path[1];
if (clickedCard != cardOne) {
clickedCard.classList.add('is-flipped');
if (!cardOne) {
cardOne = clickedCard;
let cardOneImg = cardOne.querySelector('.card-front').getAttribute('alt');
if (cardOneImg != "ace") {
setTimeout(() => {
cardOne.classList.toggle('vibration');
}, 1000);
setTimeout(() => {
cardOne.classList.remove('is-flipped');
}, 3000);
}
return
}
if (!cardTwo) {
cardTwo = clickedCard;
let cardOneImg = cardOne.querySelector('.card-front').getAttribute('alt');
let cardTwoImg = cardTwo.querySelector('.card-front').getAttribute('alt');
if (cardOneImg === "ace" && cardTwoImg != "ace") {
setTimeout(() => {
cardOne.classList.add('vibration');
cardTwo.classList.add('vibration');
}, 1000);
setTimeout(() => {
cardOne.classList.remove('is-flipped');
cardTwo.classList.remove('is-flipped');
}, 3000);
}
return
}
cardThree = clickedCard;
let cardOneImg = cardOne.querySelector('.card-front').getAttribute('alt');
let cardTwoImg = cardTwo.querySelector('.card-front').getAttribute('alt');
let cardThreeImg = cardThree.querySelector('.card-front').getAttribute('alt');
matchCards(cardOneImg, cardTwoImg, cardThreeImg);
}
};
cards.forEach(card => {
card.addEventListener('click', flipCard);
});
cards.forEach(card => {
card.addEventListener('touchstart', flipCard);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: radial-gradient(circle at 10% 20%, rgb(0, 0, 0) 0%, rgb(64, 64, 64) 90.2%);
}
header {
color: #fff;
text-align: center;
}
.headline {
font-size: 5vw;
margin-top: 5vw;
}
header p {
padding-top: 1vw;
}
.sub-text {
font-size: 1.5vw;
}
.cards-background {
margin-top: 6vw;
display: flex;
flex-direction: row;
justify-content: center;
perspective: 1000px;
-webkit-perspective: 1000px;
position: relative;
}
.card-toFlip {
transform-style: preserve-3d;
transition: all 0.8s ease;
text-align: center;
height: 100%;
width: 100%;
}
.card-toFlip .card-back {
position: absolute;
left: 3%;
margin: 0vw 0.5vw;
border-radius: 0.5vw;
width: 130px;
height: 190px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.card-toFlip.is-flipped {
transform: rotateY(180deg);
animation: normal 0.5s ease;
}
.card-toFlip .card-front {
position: absolute;
border-radius: 0.5vw;
transform: rotateY(180deg);
left: 3%;
margin: 0vw 0.5vw;
width: 130px;
height: 190px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.cards-background img:hover {
box-shadow: 3px 3px 3px grey;
cursor: pointer;
}
.card-toFlip.is-flipped.vibration {
animation: vibration 0.4s ease-in-out;
transform: rotateY(0deg);
}
#keyframes vibration {
0%,
100% {
transform: translateX(0);
-webkit-transform: translate3d(0, 0, 0);
}
20% {
transform: translateX(-13px);
-webkit-transform: translate3d(-13px, 0, 0);
}
40% {
transform: translateX(13px);
-webkit-transform: translate3d(13px, 0, 0);
}
60% {
transform: translateX(-8px);
-webkit-transform: translate3d(-8px, 0, 0);
}
80% {
transform: translateX(8px);
-webkit-transform: translate3d(8px, 0, 0);
}
}
#media (min-width:992px) and (max-width:1199px) {
.headline {
margin: 10vw 3vw 0vw;
}
.cards-background {
justify-content: center;
perspective: 1000px;
display: flex;
flex-wrap: wrap;
margin: 13vw 2vw 2vw 2vw;
}
.card-toFlip {
width: 19%;
}
.card-toFlip .card-front {
width: 130px;
height: 190px;
left: 15%;
}
.card-toFlip .card-back {
width: 130px;
height: 190px;
position: static;
margin-bottom: 11vw;
}
}
#media (min-width:768px) and (max-width:991px) {
.headline {
margin: 10vw 3vw 0vw;
font-size: 7vw;
}
header p {
margin: 0.5vw;
}
.sub-text {
font-size: 3vw;
}
.cards-background {
justify-content: center;
perspective: 1000px;
display: flex;
flex-wrap: wrap;
margin: 13vw 2vw 2vw 2vw;
}
.card-toFlip {
width: 30%;
transition: transform 0.5s;
transform-style: none;
}
.card-toFlip .card-front {
width: 130px;
height: 190px;
left: 25%;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.card-toFlip .card-back {
width: 130px;
height: 190px;
position: static;
margin-bottom: 11vw;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
}
#media (max-width:767px) {
.headline {
margin: 10vw 3vw 0vw;
}
.sub-text {
font-size: 2vw;
}
.cards-background {
justify-content: center;
perspective: 1000px;
display: flex;
flex-wrap: wrap;
margin: 8vw 2vw 2vw 2vw;
}
.card-toFlip {
width: 30%;
transition: transform 0.8s;
transform-style: none;
}
.card-toFlip .card-front {
width: 130px;
height: 190px;
left: 25%;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.card-toFlip .card-back {
width: 130px;
height: 190px;
position: static;
margin-bottom: 5vw;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
}
<main style="height:100vh">
<div class="cards-background">
<div class="card1 card-toFlip" id="card">
<img src="images/back.png" class="card-back" id="card-back">
<img src="images/2_of_clubs.png" class="card-front" id="card-number" alt="2">
</div>
<div class="card2 card-toFlip" id="card">
<img src="images/back.png" class="card-back">
<img src="images/ace_of_clubs.png" class="card-front" id="card-number" alt="ace">
</div>
<div class="card3 card-toFlip" id="card">
<img src="images/back.png" class="card-back" id="card-back">
<img src="images/3_of_clubs.png" class="card-front" id="card-number" alt="3">
</div>
<div class="card4 card-toFlip" id="card">
<img src="images/back.png" class="card-back" id="card-back">
<img src="images/4_of_clubs.png" class="card-front" id="card-number" alt="4">
</div>
<div class="card5 card-toFlip" id="card">
<img src="images/back.png" class="card-back" id="card-back">
<img src="images/ace_of_clubs.png" class="card-front" id="card-number" alt="ace">
</div>
<div class="card6 card-toFlip" id="card">
<img src="images/back.png" class="card-back" id="card-back">
<img src="images/5_of_clubs.png" class="card-front" id="card-number" alt="5">
</div>
<div class="card7 card-toFlip" id="card">
<img src="images/back.png" class="card-back" id="card-back">
<img src="images/6_of_clubs.png" class="card-front" id="card-number" alt="6">
</div>
<div class="card8 card-toFlip" id="card">
<img src="images/back.png" class="card-back" id="card-back">
<img src="images/7_of_clubs.png" class="card-front" id="card-number" alt="7">
</div>
<div class="card9 card-toFlip" id="card">
<img src="images/back.png" class="card-back" id="card-back">
<img src="images/ace_of_clubs.png" class="card-front" id="card-number" alt="ace">
</div>
</div>
</main>

It was a tough one to read but if I'm gonna guess, I'd say your error comes from this rule:
.card-toFlip .card-front {
width: 130px;
height: 190px;
left: 25%;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
under the #media (max-width:767px) media query.
The fact that you said max-width 767px means that style will affect all devices between 767px and 0 (if it's possible to have devices with 0 width). Meaning this style will affect mobile devices as well, since most of their widths fall below 767px.
Now, because the styles in that media query will take precedence over all the previously defined styles, the card front would always be flipped 180deg even though you add the is-flipped class. I hope it makes sense.

How to use IntersectionObserer with transform: scale()?

I have a menu with css snaps that works perfectly with IntersectionObserver, just using opacity. But when I add transform:scale() it doesn't work, or it flickers on mobile devices. What is the solution for this? In the browser it works perfectly, but on mobile devices it keeps blinking.The problem is when i try to change any transform:.
const cards = document.querySelectorAll('.card')
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((elem) => {
if (elem.isIntersecting) {
cards.forEach(e => {
e.classList.remove('active')
})
elem.target.classList.add("active");
}
});
}, {
rootMargin: "0px",
threshold: 0.5
}
);
document.querySelectorAll('.card').forEach(elem => observer.observe(elem));
.gallery {
position: relative;
max-width: 800px;
padding: 0 10;
}
.gallery_scroller {
scroll-snap-type: x mandatory;
overflow-x: scroll;
overflow-y: hidden;
display: flex;
align-items: center;
height: 50vh;
}
.gallery_scroller .card {
scroll-snap-align: center;
scroll-snap-stop: always;
margin: 10px;
position: relative;
}
.card {
min-width: 75%;
min-height: 95%;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
background-color: red;
}
.card {
transform: scale(.9);
opacity: 0.2;
transition: 0.3s ease;
}
.card.active{
transform: scale(1.0);
opacity: 1;
}
<div class="gallery">
<div class="gallery_scroller">
<div class="card active">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>
</div>

I'm trying to create a slideshow embedded inside a smartphone image for my website in the below url link, but images are not fitted accurate

I am trying to create a slideshow embedded inside a smartphone image for my website in the below URL link but the images are not fitted accurately.
so please help out to solve this issue
images inside the slider not fitted into the smartphone screen i.e width and height, can we make the images scroll inside the smartphone accurately display
url link of website
.dm-width {
width: 350px;
margin: 75px;
}
.iphone-mockup {
position: relative;
z-index: 5;
}
.dm-device {
position: relative;
width: 100%;
padding-bottom:203.477897%;
margin-bottom: 20px;
}
.device {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
-webkit-background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(https://res.cloudinary.com/di5yipnns/image/upload/v1482236588/apple-iphone_aivldo.png);
background-size: cover;
background-position: center center;
}
.screen {
overflow: hidden;
position: absolute;
top: 18.1%;
bottom: 20.6%;
left: 12.49%;
right: 17.4%;
background-color: #E91E63;
}
.slider {
height: 100%;
}
.slider div {
height: 119%;
padding: 30px;
}
.slider__item {
font-size: 100px;
color: rgba(255,255,255,0.7);
display: flex;
justify-content: center;
align-items: center;
}
.slider__item--2 {
background-color: #2196F3;
}
.slider__item--3 {
background-color: #4CAF50;
}
.slider__item--4 {
background-color: #FFC107;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script>
<div class="dm-width">
<div class="dm-device">
<div class="device">
<div class="screen">
<div class="slider">
<div class="slider__item slider__item--1">
<img src="inc/img/new_2.jpg" alt="app download" >
</div>
<div class="slider__item slider__item--2">
<img src="inc/img/new_1.jpg" alt="app download" >
</div>
<div class="slider__item slider__item--3">
<img src="inc/img/new_3.jpg" alt="app download" >
</div>
<div class="slider__item slider__item--4">
<img src="inc/img/new_4.jpg" alt="app download" >
</div>
</div>
</div>
</div>
</div>
</div>

HTML CSS Change BG on Hover on Area

I would like to change the image depending on what area I hover.
Unfortunately, I have to realize it using only HTML/CSS.
I have already read and understood similar amounts but I can't get the desired result.
Does anyone have an idea?
body {
background-color: white;
justify-content: center;
align-content: center;
overflow: hidden;
}
.box {
position: relative;
width: 1044px;
height: 461px;
}
.box .screen {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: 0.7s;
}
box.GER {
background: url('worldmap.png');
}
box.GER:hover {
background : url("worldmap_ger.png");
}
<div class="box">
<img src="worldmap.png" usemap="#image-map">
<map src="worldmap.png" name="image-map">
<div class="GER">
<area target="GER" alt="GER" title="GER" href="linkGER" coords="508,263,510,255,515,251,527,254,530,264,525,268,526,278,512,278,508,273" shape="poly">
</div>

You use wrong selector, need change to .box .GER instead of box.GER
body {
background-color: white;
justify-content: center;
align-content: center;
overflow: hidden;
}
.box {
position: relative;
width: 1044px;
height: 461px;
}
.box .screen {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: 0.7s;
}
.box .GER {
background: url('https://pngimg.com/uploads/world_map/world_map_PNG28.png');
border: 1px solid red;
height: 200px;
}
.box .GER:hover {
background : url("https://w7.pngwing.com/pngs/944/256/png-transparent-world-map-globe-world-map-flat-earth-asia-miscellaneous-blue-world.png");
}
<div class="box">
<map src="https://pngimg.com/uploads/world_map/world_map_PNG28.png" name="image-map">
<div class="GER">
<area target="GER" alt="GER" title="GER" href="linkGER" coords="508,263,510,255,515,251,527,254,530,264,525,268,526,278,512,278,508,273" shape="poly">
</div>

Flip Card not showing back side

Im learning webdev and in one the projects im working on i have to build a flip-card using css.
I have done it and its working fine when i flip it on hover. I want to be able to flip it on click but when i click it the back side is not showing.
Can anyone point out what am i doing wrong?
Thanks
Codepen Here CODEPEN
HTML
<section class="container">
<div class="card">
<div class="card__inner ">
<div class="card__side card1 card__side-front">FRONT</div>
<div class="card__side card1 card__side-back">BACK</div>
</div>
</div>
</section>
CSS
.container{
display: flex;
height:auto;
justify-content: space-around;
position: relative;
align-items: center;
}
.card{
perspective: 150rem;
position: relative;
height: 20rem;
width:10rem;
&__inner{
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 20rem;
}
&__side {
position: absolute;
top: 0;
left: 0;
height: 20rem;
width:10rem;
transition: all 0.8s ease;
backface-visibility: hidden;
border-radius: 0.5rem;
box-shadow: 0 8px 6px -6px black;
&-front{
background: peru;
}
&-back{
background: orchid;
transform: rotateY(180deg);
}
}
// &:hover &__side-front{
// transform: rotateY(180deg);
// }
// &:hover &__side-back{
// transform: rotateY(0deg);
// }
.flipped {
transform: rotateY(180deg);
}
}
JS
$(".card__side").click(function(){
$(this).addClass("flipped");
});
Thanks in advance

check out this https://codepen.io/jasinth5/pen/GxBqEd
i have removed transform from class back,added flipped class to BACK and applied this js into this
$(".card__side").click(function(){
$("div.flipped").removeClass('flipped');
$(this).addClass("flipped");
});