Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Button Position</title>
<style>
.container {
position: relative;
width: 100%;
max-width: 1723px; /* Set the max width to the original image size */
margin: 0 auto;
}
.responsive-image {
width: 100%;
height: auto;
}
.button {
position: absolute;
top: 330px; /* Initial position when image is at its full size */
left: 915px; /* Initial position when image is at its full size */
transform: translate(-50%, -50%); /* Adjust to center the button */
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
font-size: 16px;
}
@media (max-width: 1723px) {
/* Optional CSS for dynamic adjustment */
.button {
/* Use calc to adjust the position based on percentage */
top: calc(330px / 1723 * 100%);
left: calc(915px / 1723 * 100%);
}
}
</style>
</head>
<body>
<div class="container">
<img src="https://airrisupplements.com/cdn/shop/files/Marketing_Card_9689b56f-2fc1-4855-972c-e25ed2a85722.png?v=1715916415&width=3840" alt="Marketing Card" class="responsive-image">
<button class="button">Click Me</button>
</div>
<!-- Optional JavaScript for better responsiveness -->
<script>
const container = document.querySelector('.container');
const button = document.querySelector('.button');
const image = document.querySelector('.responsive-image');
function adjustButtonPosition() {
const imgWidth = image.clientWidth;
const imgHeight = image.clientHeight;
const originalImgWidth = 1723;
const originalImgHeight = 861.5;
const buttonOriginalX = 1300;
const buttonOriginalY = 670;
const newButtonX = (buttonOriginalX / originalImgWidth) * imgWidth;
const newButtonY = (buttonOriginalY / originalImgHeight) * imgHeight;
button.style.left = `${newButtonX}px`;
button.style.top = `${newButtonY}px`;
}
window.addEventListener('resize', adjustButtonPosition);
window.addEventListener('load', adjustButtonPosition);
</script>
</body>
</html>
Syncora: Backup & Restore [Free] - Automated real-time store backup with one-click easy restore.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery, and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers.
