В настоящее время я работаю над клоном Watch2Gether, который отлично выглядит на средних и больших устройствах, но как только вы доберетесь до просмотра телефона, все будет выглядеть потрясающе, пока вы не прокрутите влево и не найдете массивное пустое пространство справа. Я не совсем уверен, почему это происходит, я пытался изменить поля и отступы для некоторых элементов, которые помогли с пользовательским интерфейсом, но при прокрутке все еще остается огромное пустое пространство, что выглядит очень плохо. Есть идеи, как это исправить?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Description -->
<meta name="description" content="Watch Youtube videos live with your friends, easily, for free!">
<!-- Favicon -->
<link rel="icon" href="/img/favicon.ico">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/styles.css" />
<title>Room</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">WatchWithFriends</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/create">Create Room</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
<input autocomplete="off" id="paste" name="paste" class="form-control form-control-md"placeholder="Paste Video URL Here" aria-label="Search">
<button id="watch" class="btn btn-outline-success waves-effect" type="submit">Watch</button>
</div>
</nav>
<div class="section">
<div class="row">
<div class="col-lg-8 col-md-7 col-sm-12 main-section">
<h1 id="roomBasic"><span id="name"></span><span id="users"></span></h1>
<div id="player"></div>
</div>
<div class="col-lg-4 col-md-5 col-sm-12">
<div id="chat-holder">
<div id="mario-chat">
<a id="leave" href="/" class="btn btn-primary btn-block btn-lg leave">Leave Room</a>
<div id="chat-window">
<div id="output"></div>
<div id="feedback"></div>
</div>
<form action="" id="chat-form">
<input
type="text"
id="message"
placeholder="Message"
required
autocomplete="off"
class="form-control form-control-lg"
/>
<button class="btn btn-black btn-block" id="send" onclick="reload()">Send</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="info">
<div class="row">
<div class="col-md-8">
<h3 id="welcome-room">Welcome to your room!</h3>
<p class="room-info-p">
To invite a friend, just copy the link below. To change their name they
just have to replace the name in the "username" field. Ex:
username=Billy -> username=Ryan. They can also join using the "Join Room" page.
</p>
<div class="input-group mb-3">
<input id="urlInfo" type="text" class="form-control" placeholder="Url">
<div class="input-group-append">
<button onclick="copyUrl()" class="btn btn-md btn-outline-dark m-0 px-3 py-2 z-depth-0 waves-effect" type="button" id="button-addon2">Copy</button>
</div>
</div>
<p class="room-info-p">To play a new video, paste the URL into the form in the navigation bar and press watch!</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.4/qs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<script src="client.js"></script>
<script src="users.js"></script>
<%- include('partials/footer') %>
CSS:
/* room page */
#name {
color: #575ed8;
}
#roomBasic {
font-weight: 600;
}
.section {
height: 80vh;
}
#mario-chat {
max-width: 500px;
border: 1px solid #ddd;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.05);
border-radius: 2px;
}
#chat-holder {
margin: 11vh 3vh;
}
#chat-window {
height: 50vh;
overflow: auto;
background: #f9f9f9;
}
#sentText {
padding: 14px 0px;
margin: 0 20px;
border-bottom: 1px solid #e9e9e9;
color: #555;
}
#sentText p {
font-size: 1.1rem;
margin-bottom: 0.1px;
}
#feedback p {
color: #aaa;
padding: 14px 0px;
margin: 0 20px;
}
#output strong {
color: #575ed8;
}
#mario-chat input {
padding: 10px 20px;
box-sizing: border-box;
background: #eee;
border: 0;
display: block;
width: 100%;
background: #fff;
border-bottom: 1px solid #eee;
font-size: 16px;
}
#send {
background-color: #292b2c;
color: #fff;
font-size: 18px;
border: 0;
padding: 12px 0;
width: 100%;
border-radius: 0 0 2px 2px;
}
#player {
margin: 30px 30px;
border: 1px solid #ddd;
height: 62vh;
width: 100%;
}
.main-section h1 {
margin-left: 30px;
margin-top: 20px;
}
.info {
margin: 30px 30px;
}
.leave {
background: #575ed8;
font-size: 18px;
width: 100%;
margin-top: 0;
margin-bottom: 0;
}
/* info section */
.info {
height: 50vh;
font-family: "Roboto", sans-serif;
}
#welcome-room {
font-weight: 600;
}
