Large empty space after video on mobile screen - Need help removing it

IreneOu · June 18, 2023

Hi everyone!

I have a custom code that works perfectly on desktop and mobile screens on my website (pw:123456). However, I'm encountering an issue on mobile screens where there is a large empty space after the video (screenshot 1).

I've checked the Developer Tool and it seems like the space is not caused by padding or margin settings (screenshot 2). Also in the editing mode, I cannot remove this space on Squarespace (screenshot 3).

I would greatly appreciate any ideas or suggestions on how to eliminate this large space. Thank you!!

Here's the custom code I'm using:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
}

.buttons {
width: 20%;
display: flex;
flex-direction: column;
margin-right: 10px;
}

button {
width: 100%;
padding: 10px;
background: none;
border: none;
outline: none;
text-align: left;
cursor: pointer;
font-size: 1.3rem;
color: #846246;
text-decoration: none;
position: relative;
}

button.selected {
text-decoration: underline;
text-decoration-color: #C6B1A0;
text-decoration-thickness: 1.5px;
text-underline-offset: 20%;
}

.video-wrapper {
width: 80%;
position: relative;
padding-top: 0;
background: none;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
}

.video-frame {
width: 100%;
aspect-ratio: 16/9;
background: white;
border: 1.8px solid #C6B1A0;
border-radius: 10px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}

.video-frame iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 10px;
}

@media (max-width: 821px) {
.container {
flex-direction: column;
}

.buttons {
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
margin-right: 0;
overflow-x: auto;
white-space: nowrap;
background-color: #F0ECE8;
padding: 5px;
margin-bottom: 20px;
}

.buttons .button {
width: auto;
font-size: 1rem;
}

.video-wrapper {
width: 90%;
margin: 0 auto;
position: relative;
padding-top: 75%;
}

.video-frame {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
aspect-ratio: 4/3;
max-width: 94%;
}

.video-frame iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 10px;
}

/* Hide scrollbar on mobile */
.buttons::-webkit-scrollbar {
display: none;
}
}
</style>
</head>
<body>
<div class="container">
<div class="buttons">
<button id="button1" onclick="changeVideo('https://www.youtube.com/embed/XDcC_mw4apM')" class="button">姿態調整</button>
<button id="button2" onclick="changeVideo('https://www.youtube.com/embed/sVPc3cpatzc')" class="button">流動瑜伽</button>
<button id="button3" onclick="changeVideo('https://www.youtube.com/embed/Wo5Mm5jqd28')" class="button">皮拉提斯</button>
<button id="button4" onclick="changeVideo('https://www.youtube.com/embed/DT8cGPpBHuo')" class="button">芭蕾雕塑</button>
<button id="button5" onclick="changeVideo('https://www.youtube.com/embed/NPmM2qNnvjk')" class="button">K-POP舞蹈</button>
<button id="button6" onclick="changeVideo('https://www.youtube.com/embed/i3ZktLwrOCc')" class="button">拉丁有氧</button>
<button id="button7" onclick="changeVideo('https://www.youtube.com/embed/xgVpQYXwsko')" class="button">舞感養成</button>
<button id="button8" onclick="changeVideo('https://www.youtube.com/embed/vHGt9EkDuaw')" class="button">爆汗燃脂</button>
<button id="button9" onclick="changeVideo('https://www.youtube.com/embed/InWw8C07EsA')" class="button">和緩伸展</button>
<button id="button10" onclick="changeVideo('https://www.youtube.com/embed/zG5WYwJ4zgY')" class="button">冥想療癒</button>
</div>
<div class="video-wrapper">
<div class="video-frame">
<iframe id="video" src="https://www.youtube.com/embed/XDcC_mw4apM" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

// Set the first button as selected by default
var buttons = document.querySelectorAll('.button');
var selectedButton = buttons[0];

buttons.forEach(function(button) {
button.addEventListener('click', function() {
// Remove the selected class from the previously selected button
selectedButton.classList.remove('selected');

// Add the selected class to the clicked button
this.classList.add('selected');

// Update the selected button reference
selectedButton = this;
});
});
</script>
</body>
</html>

Edited June 18, 2023 by IreneOu

tuanphan · June 22, 2023

You can add this code to Design > Custom CSS to fix problem

@media screen and (max-width:767px) {
.fe-64898133a9aea24242fb95c4 {
    grid-template-rows: repeat(16,minmax(24px, auto)) !important;
}
}

IreneOu · July 3, 2023

This code works! Thank you so much!! Would you mind sharing why you used "16" in this code instead of another number?

tuanphan · July 3, 2023

5 hours ago, IreneOu said:

This code works! Thank you so much!! Would you mind sharing why you used "16" in this code instead of another number?

This section, Squarespace uses number 24 (24 rows, you can see this number when edit section)

To reduce gap, you need to change to a number less than 24.

And I tried 23, 22, 21....and found 16 is the best

Large empty space after video on mobile screen - Need help removing it

Recommended Posts

IreneOu

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

Posted Images

tuanphan

IreneOu

tuanphan

Create an account or sign in to comment

tuanphan

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources