White space on right side of page on full screen view

Jordhen
Tourist
11 0 0

On my custom liquid section this is my code:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Website</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

.background-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: hidden;
}

.background-video {
height: 100%;
object-fit: cover;
}

.dot-container {
position: absolute;
top: 36%;
left: 52.5%;
transform: translate(-50%, -50%);
}

.dot {
width: 12px;
height: 12px;
background-color: transparent; /* Adjust color as needed */
border-radius: 0; /* Simplified to 0 instead of 0px */
display: inline-block;
cursor: pointer;
border: none;
outline: none;
transform: translate(0%, -80%);
}

.dot:hover + .tooltip {
opacity: 1;
}

.tooltip {
position: absolute; /* Changed from fixed to absolute */
background-color: #ffffff;
color: #000000;
font-weight: bold;
font-size: 14px;
padding: 5px;
border-radius: 12px;
top: calc(100% + 10px); /* Position directly beneath the dot */
left: 50%;
transform: translateX(-50%);
white-space: nowrap; /* Ensure text does not wrap */
opacity: 0;
transition: opacity 0.3s;
pointer-events: none; /* Ensures tooltip does not interfere with clicking */
}

.tooltip a {
color: #000000;
text-decoration: none;
}

</style>
</head>
<body>
<div class="background-container">
<div class="the-image">
<video class="background-video" autoplay loop muted>
<source src="https://cdn.shopify.com/videos/c/o/v/a90fb229e1ce4385b1a69cd82f5b11bc.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="dot-container">
<button class="dot" onclick="redirectToPage()"></button>
<div class="tooltip">
ENTER STORE
</div>
</div>
</div>
</div>
<script>
function redirectToPage() {
window.location.href = "https://sitharr.myshopify.com/pages/first-floor";
}
</script>
</body>
</html>

 

and underneath that is my custom css for that section

 

.the-image {
position: relative;
width: fit-content;
height: 100%;
}
.dot-container {
width: 12px !important;
height: 12px !important;
position: absolute !important;
top: 69% !important;
left: 54.25% !important;
transform: none !important;
background-color: transparent !important;
}

 

My problem is that their is white space on the right when on a full screen but on other screen types everything works perfectly

 

 

My Store · Customize Craft · Shopify - Google Chrome 4_13_2024 8_18_10 PM.png

Reply 1 (1)

TerenceKEANE
Shopify Partner
294 61 53

Hi,

 

Everything seems to be in order from my perspective. If the issue persists, don't hesitate to inform me.

 

Terence..

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites