I used JavaScript to set the margin-right of a div when the window is resized.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function adjustMargin(){
let cardElement = document.querySelector(".maincard");
var width = cardElement.offsetWidth;
let circleElement = document.querySelector(".card_circle");
var marginRightValue = (400 - width) / 10;
circleElement.style.marginRight = marginRightValue +"px";
document.querySelector(".abc").innerHTML = circleElement.style.marginRight;
}
window.onresize = adjustMargin;
</script>
</head>
<body>
<div class="col">
<a class="maincard" href="IALA boyage.html">
<div class="card transition">
<h2 class="transition">IALA Buoyage</h2>
<div class="card_circle transition"></div>
</div>
</a>
</div><div class="col">
<a class="maincard" href="IALA boyage.html">
<div class="card transition">
<h2 class="transition">IALA Buoyage</h2>
<div class="card_circle transition"></div>
</div>
</a>
</div><div class="col">
<a class="maincard" href="IALA boyage.html">
<div class="card transition">
<h2 id="abc" class="transition abc">IALA Buoyage</h2>
<div class="card_circle transition"></div>
</div>
</a>
</div
</body>
</html>
The 'marginRight' function is successful as innerHTML changes while resizing. However, the margin-right is not visually changing, and I am unsure of the reason
I previously placed the script just before the '' tag, which resulted in a browser error 'marginFunction' not defined.
The CSS code:
.transition {
transition: .3s cubic-bezier(.3, 0, 0, 1.3);
}
/* Other CSS styles... */
.maincard{padding: 10px;}
If the provided code snippets do not work, you can view the full webpage on Codepen.