Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

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>

  <script>
    function changeVideo(source) {
      var video = document.getElementById('video');
      video.src = source;
    }

    // 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>

Screenshot 2023-06-18 at 11.47.49 AM.png

Screenshot 2023-06-18 at 11.47.42 AM.png

Screenshot 2023-06-18 at 11.48.22 AM.png

Edited by IreneOu
Link to comment
  • Solution

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.