I'm currently working on incorporating a frame into a CSS modal, but the current display is not quite ideal. Additionally, I manually adjusted the frame's position (top and left), which is causing misalignment issues for different screen sizes, resulting in the frame appearing outside the modal. This can be seen in the image below.
For larger screens:
https://i.sstatic.net/kAdig.png
For smaller screens:
https://i.sstatic.net/04vJo.png
To achieve the above results, I utilized the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fafdbc1dfc1df">[email protected]</a>/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Document</title>
<style>
body {
width: 100vw;
height: 100vh;
background: lightgray;
}
.frame-card {
width: 800px;
height: 520px;
position: absolute;
top: 25%;
left: 31.2%;
}
</style>
</head>
<body>
<div class="container mt-2">
<!-- Button trigger modal -->
...
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44332f303025322764223734413f413f">[email protected]</a>/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b1e2b3c3824302f783c26282c3a4c2c3a">[email protected]</a>/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
...
</body>
</html>
Can anyone suggest what classes or styling I should use to resolve these alignment issues? Your help is greatly appreciated!
I currently have the image positioned using absolute positioning, but I'm not sure if it's the best method. Additionally, I manually aligned the image using left and top values, but I am seeking a more automated approach to ensure proper alignment.