White space on right side of page on full screen view

11 0 0

On my custom liquid section this is my code:


<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Website</title>
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;

<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.
<div class="dot-container">
<button class="dot" onclick="redirectToPage()"></button>
<div class="tooltip">
function redirectToPage() {
window.location.href = "https://sitharr.myshopify.com/pages/first-floor";


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)

Shopify Partner
294 61 53



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



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