I have problems to make a infographic block that I created responsive. I have a block in which their is an image, on the image their are cogwheels, under image numeric line. Each time when user hovers on cogweel or numeric line item it’s modal window with information opens. Now I need to make it responsive but I can’t. Can someone try to help me?
I tried to write media queris for each screen, for example @ media (min-width: 960, 1024, 1200, 1920) etc. but the problem is that the cogwheels are not staying in their position and sometimes read the styles from other media query.
HTML
<section class="kpb_block">
<div class="infographic-section">
<div class="robot-container">
<div class="robot">
<!-- Gear images -->
<img src="./images/gear.png" alt="Cogwheel" class="cogwheel cogwheel-1" data-modal="modal-1">
<img src="./images/gear.png" alt="Cogwheel" class="cogwheel cogwheel-2" data-modal="modal-2">
<img src="./images/gear.png" alt="Cogwheel" class="cogwheel cogwheel-3" data-modal="modal-3">
<img src="./images/gear.png" alt="Cogwheel" class="cogwheel cogwheel-4" data-modal="modal-4">
<img src="./images/gear.png" alt="Cogwheel" class="cogwheel cogwheel-5" data-modal="modal-5">
<img src="./images/gear.png" alt="Cogwheel" class="cogwheel cogwheel-6" data-modal="modal-6">
<img src="./images/gear.png" alt="Cogwheel" class="cogwheel cogwheel-7" data-modal="modal-7">
</div>
<div class="info-line">
<div class="info" data-dot="1"><span>1. Part One</span>
<img src="./images/6B6GZK-LogoMakr.png" alt="Logo 1" class="infographic-logo">
<p>Falcon 9’s first stage lofts Dragon to orbit. Falcon 9’s first and second stage separate. Second stage accelerates Dragon to orbital velocity.</p>
</div>
<div class="info" data-dot="2"><span>2. Part Two</span>
<img src="./images/camera.png" alt="Logo 2" class="infographic-logo">
<p>Dragon performs delta-velocity orbit raising maneuvers to catch up with the International Space Station.</p>
</div>
<div class="info" data-dot="3"><span>3. Part Three</span>
<img src="./images/tracking.png" alt="Logo 3" class="infographic-logo">
<p>Dragon separates from Falcon 9’s second stage and performs initial orbit activation and checkouts of propulsion, life support, and thermal control systems.</p>
</div>
<div class="info" data-dot="4"><span>4. Part Four</span>
<img src="./images/light.png" alt="Logo 4" class="infographic-logo">
<p>Dragon establishes a communication link with the International Space Station and performs its final orbit raising delta-velocity burn.</p>
</div>
<div class="info" data-dot="5"><span>5. Part Five</span>
<img src="./images/wifi.png" alt="Logo 5" class="infographic-logo">
<p>Dragon establishes relative navigation to the International Space Station and arrives along the docking axis, initiating an autonomous approach.</p>
</div>
<div class="info" data-dot="6"><span>6. Part Six</span>
<img src="./images/lidar.png" alt="Logo 6" class="infographic-logo">
<p>Dragon establishes relative navigation to the International Space Station and arrives along the docking axis, initiating an autonomous approach.</p>
</div>
<div class="info" data-dot="7"><span>7. Part Seven</span>
<img src="./images/robot-arm.png" alt="Logo 7" class="infographic-logo">
<p>Dragon establishes a communication link with the International Space Station and performs its final orbit raising delta-velocity burn.</p>
</div>
<!-- Add more info elements -->
</div>
<div class="modal" id="modal-1">
<!-- Modal content for dot 1 -->
<div class="modal-content">
<h2>Modal Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel ultrices ante. Quisque volutpat, erat ac viverra ultrices, mi mauris malesuada nulla, et auctor ante magna rutrum elit.</p>
<img src="./images/kenji-x1/Kenji-8.jpg" alt="Image 1">
</div>
</div>
<div class="modal" id="modal-2">
<!-- Modal content for dot 2 -->
<div class="modal-content">
<h2>Modal Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel ultrices ante. Quisque volutpat, erat ac viverra ultrices, mi mauris malesuada nulla, et auctor ante magna rutrum elit.</p>
<img src="./video/tower_rotation_smallsize.gif" alt="Image 1">
</div>
</div>
<div class="modal" id="modal-3">
<!-- Modal content for dot 3 -->
<div class="modal-content">
<h2>Modal Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel ultrices ante. Quisque volutpat, erat ac viverra ultrices, mi mauris malesuada nulla, et auctor ante magna rutrum elit.</p>
<!--<img src="./images/kenji-x1/" alt="Image 3"> -->
<video autoplay muted loop controls>
<source src="./video/Baseboard_video.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="modal" id="modal-4">
<!-- Modal content for dot 4 -->
<!-- <img src="./images/kenji-x1/Kenji-6.jpg" alt="Image 4"> -->
<div class="modal-content">
<h2>Modal Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel ultrices ante. Quisque volutpat, erat ac viverra ultrices, mi mauris malesuada nulla, et auctor ante magna rutrum elit.</p>
<img src="./images/kenji-x1/Kenji-6.jpg" alt="Image 6">
</div>
</div>
<div class="modal" id="modal-5">
<!-- Modal content for dot 5 -->
<div class="modal-content">
<h2>Modal Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel ultrices ante. Quisque volutpat, erat ac viverra ultrices, mi mauris malesuada nulla, et auctor ante magna rutrum elit.</p>
<video autoplay muted loop controls>
<source src="./video/video-console.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="modal" id="modal-6">
<!-- Modal content for dot 6 -->
<div class="modal-content">
<h2>Modal Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel ultrices ante. Quisque volutpat, erat ac viverra ultrices, mi mauris malesuada nulla, et auctor ante magna rutrum elit.</p>
<video autoplay muted loop controls>
<source src="./video/Lab_Application_1.gif.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="modal" id="modal-7">
<!-- Modal content for dot 7 -->
<div class="modal-content">
<h2>Modal Heading</h2>
<p>Lorem ipsum dolor sit amet, In vel ultrices ante. elit. In vel ultrices ante. Quisque volutpat, erat ac viverra ultrices, mi mauris malesuada nulla, et auctor ante magna rutrum elit.</p>
<img src="./images/kenji-x1/Kenji-6.jpg" alt="Your GIF">
</div>
</div>
</div>
</section>
CSS
body {
background-color: #000;
font-family: 'Familjen Grotesk', sans-serif;
}
.infographic-section {
position: relative;
height: 150vh;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border: 1px solid green;
overflow: hidden;
}
.robot-container {
position: relative;
background-image: url('../images/Kenji-drivedown.png');
background-size: 55%;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 100vh;
border: 1px solid green;
}
.robot {
position: relative;
border: 1px solid green;
}
.cogwheel {
position: absolute;
width: 30px;
height: 30px;
background-image: url('../images/gear.png');
background-size: cover;
transition: transform 0.5s ease-in-out;
}
.cogwheel::before,
.cogwheel::after {
content: '';
position: absolute;
width: 2px;
height: 100px;
background-color: white;
}
.cogwheel:hover {
transform: rotate(360deg);
}
/* Adjust cogwheel positions */
.cogwheel-1 {
top: 429px;
left: 460px;
}
.cogwheel-2 {
top: 270px;
left: 460px;
}
.cogwheel-3 {
top: 100px;
left: 720px;
}
.cogwheel-4 {
top: 270px;
left: 755px;
}
.cogwheel-5 {
top: 200px;
left: 590px;
}
.cogwheel-6 {
top: 320px;
left: 600px;
}
.cogwheel-7 {
top: 420px;
left: 710px;
}
.info-line {
text-align: center;
position: relative;
border: 1px solid green;
display: flex;
width: 100%;
height: 40vh;
margin-top: 650px;
}
.info {
display: inline-block;
cursor: pointer;
margin: 20px;
padding: 10px;
transition: color 0.3s ease;
width: 125px;
opacity: 0;
visibility: inherit;
font-size: 12px;
line-height: 18px;
font-weight: 700;
text-align: left;
color: #fff;
position: relative;
}
.info:hover {
color: grey;
}
.info-line .info:nth-child(1) {
animation: revealUp 0.5s ease forwards;
animation-delay: 0s;
}
.info-line .info:nth-child(2) {
animation: revealUp 0.5s ease forwards;
animation-delay: 0.5s;
}
.info-line .info:nth-child(3) {
animation: revealUp 0.5s ease forwards;
animation-delay: 1s;
}
.info-line .info:nth-child(4) {
animation: revealUp 0.5s ease forwards;
animation-delay: 1.5s;
}
.info-line .info:nth-child(5) {
animation: revealUp 0.5s ease forwards;
animation-delay: 2s;
}
.info-line .info:nth-child(6) {
animation: revealUp 0.5s ease forwards;
animation-delay: 2.5s;
}
.info-line .info:nth-child(7) {
animation: revealUp 0.5s ease forwards;
animation-delay: 3s;
}
@keyframes revealUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.info > span {
display: block;
position: relative;
font-family: 'Familjen Grotesk', sans-serif;
font-size: 14px;
line-height: 18px;
font-weight: 700;
text-transform: uppercase;
}
.info p {
display: none;
margin-top: 10px;
overflow: hidden;
width: 125px;
text-align: left;
position: relative;
font-size: 12px;
line-height: 16px;
margin-top: 5px;
color: rgba(255,255,255,.5);
text-transform: none;
}
.info:hover p {
display: block;
}
.infographic-logo {
position: absolute;
width: 50px;
height: 50px;
display: none;
top: -50px;
left: 40%;
transform: translateX(-50%);
}
.info:hover .infographic-logo {
display: block;
}
.modal {
display: none;
position: absolute;
width: 300px;
height: auto;
border: none;
background-color: #fff;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
padding: 20px;
}
/* Adjust modal positions */
#modal-1 {
left: 100px;
top: 150px;
}
#modal-2 {
left: 100px;
top: 150px;
}
#modal-3 {
left: 100px;
top: 150px;
}
#modal-4 {
left: 850px;
top: 50px;
}
#modal-5 {
left: 850px;
top: 50px;
}
#modal-6 {
left: 850px;
top: 50px;
}
#modal-7 {
left: 850px;
top: 50px;
}
.modal-content {
padding: 10px;
text-align: left;
}
.modal-content h2 {
color: #000;
font-size: 20px;
margin-bottom: 10px;
font-family: 'Familjen Grotesk', sans-serif;
}
.modal-content p {
font-size: 14px;
font-weight: 200;
margin-bottom: 15px;
color: #333;
text-transform: lowercase;
}
.modal-content img, .modal-content video {
width: 100%;
height: auto;
border-radius: 8px;
border: 1px solid black;
margin-top: 10px;
}
.modal-content video {
max-height: 300px;
}
JS
document.addEventListener("DOMContentLoaded", function() {
const gears = document.querySelectorAll('.cogwheel');
const infoElements = document.querySelectorAll('.info');
const modals = document.querySelectorAll('.modal');
const logoImages = document.querySelectorAll('.infographic-logo');
const infoTexts = document.querySelectorAll('.info p');
function handleGearHover(gear, index) {
// Rotate gear
gear.style.transform = 'rotate(360deg)';
// Show modal
modals[index].style.display = 'block';
// Show info logo and text
logoImages[index].style.display = 'block';
infoTexts[index].style.display = 'block';
}
function handleGearReset(gear, index) {
// Reset gear rotation
gear.style.transform = 'rotate(0deg)';
// Hide modal
modals[index].style.display = 'none';
// Hide info logo and text
logoImages[index].style.display = 'none';
infoTexts[index].style.display = 'none';
}
gears.forEach((gear, index) => {
// Handle gear hover
gear.addEventListener('mouseenter', () => {
handleGearHover(gear, index);
});
gear.addEventListener('mouseleave', () => {
handleGearReset(gear, index);
});
});
infoElements.forEach((info, index) => {
// Handle info line hover
info.addEventListener('mouseenter', () => {
// Rotate corresponding gear
gears[index].style.transform = 'rotate(360deg)';
// Show modal
modals[index].style.display = 'block';
// Show info logo and text
logoImages[index].style.display = 'block';
infoTexts[index].style.display = 'block';
});
info.addEventListener('mouseleave', () => {
// Reset corresponding gear rotation
gears[index].style.transform = 'rotate(0deg)';
// Hide modal
modals[index].style.display = 'none';
// Hide info logo and text
logoImages[index].style.display = 'none';
infoTexts[index].style.display = 'none';
});
});
modals.forEach((modal, index) => {
// Hide modal initially
modal.style.display = 'none';
});
logoImages.forEach((logoImage, index) => {
// Hide logo images initially
logoImage.style.display = 'none';
});
infoTexts.forEach((infoText, index) => {
// Hide info texts initially
infoText.style.display = 'none';
});
});
New contributor
Robert Zohrabyan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.