HTML / CSS, когда я изменяю ширину браузера на маленький или xs для планшетов и мобильных устройств, содержимое не подходит - PullRequest
Новая
       2

HTML / CSS, когда я изменяю ширину браузера на маленький или xs для планшетов и мобильных устройств, содержимое не подходит

0 голосов
/ 20 февраля 2019 

body{
	background-image: url(https://www.ucalgary.ca/mediacentre/files/mediacentre/aerials_011a7179_fe.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	font-family: 'Numans', sans-serif;
}
html, body{
	height: 100%;
}
.container{
	height: 100%;
	align-content: center;
	overflow: hidden;
}
.card{
	height: 370px;
	margin: 10% auto auto 30%;
	width: 450px;
	background-color: rgba(0,0,0,0.50);
	border-radius: 10px;

}
.card-header h3{
	color: white;
	text-align: center;
	padding-top: 40px;
	font-size: 30px;
}
.card-header h4{
	color: white;
	text-align: center;
	padding-top: 50px;
	font-size: 20px;
}
.login_btn{
	color: black;
	background-color: #FFC312;
	border-color: #FFC312;
	width:100px;
	padding: 12px;
	border-radius: 5px;
	margin-left: 180px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	font-family: 'Numans', sans-serif;
	text-decoration: none;
}
.login_btn:hover{
	color:black;
	background-color: white;
	border-color: white;

.card{
   height: calc(100vh - 20%);
   margin: 10% 15% 0 15%;
}
<!DOCTYPE html>
<html>
<head>
	<title>University of Calgary Scholarship</title>
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="selectionPage.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
	

</head>
<body>
	<div class = "container">
		<div class="d-flex justify-content-center h-100">
			<div class = "card">
				<div class ="card-header">
					<h3>University of Calgary Scholarship Page</h3>
					<h4>Please Select One</h4>
				</div>
				<div class = "card-body">
					<div class = "form-group">
						<form action="studentLogin.html">
							<input type = "submit" value = "Student" class= "btn float-left login_btn">
						</form>
						<form action="adminLogin.html">
							<input type = "submit" value = "Administrator" class= "btn float-right login_btn">
						</form>
					</div>					
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Я изменил часть своего кода из моего предыдущего поста, но теперь, когда я уменьшаю ширину моего окна, содержимое не адаптируется к ширине экрана.Контейнер с размером экрана маленький или планшетный и хз или мобильный, половина его не будет видна.Я добавил некоторый код в конец моего файла CSS в соответствии с тем, что предложил другой пользователь.И это делает его лучше, но все еще не полностью работает на уровне малых и xs.

Спасибо .........................................................................

Ответы [ 4 ]

0 голосов
/ 20 февраля 2019

Привет, это стандартный HTML и CSS код! 

body{
	background-image: url(https://www.ucalgary.ca/mediacentre/files/mediacentre/aerials_011a7179_fe.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	font-family: 'Numans', sans-serif;
}
html, body{
	height: 100%;
}
.container{
	height: 100%;
	align-content: center;
	overflow: hidden;
}
.card{
	height: 370px;
	margin: 10% auto ;
	width: 450px;
	background-color: rgba(0,0,0,0.50);
	border-radius: 10px;

}
.card-header h3{
	color: #000;
	text-align: center;
	padding-top: 40px;
	font-size: 30px;
}
.card-header h4{
	color: #000;
	text-align: center;
	padding-top: 50px;
	font-size: 20px;
}
.login_btn{
	color: black;
	background-color: #FFC312 !important;
	border-color: #FFC312;
	padding: 12px;
	border-radius: 5px;
	margin-left: 0;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	font-family: 'Numans', sans-serif;
	text-decoration: none;
}
.login_btn:hover{
	color:black;
	background-color: white;
	border-color: white;

.card{
   height: calc(100vh - 20%);
   margin: 10% 15% 0 15%;
}
<!DOCTYPE html>
<html>
<head>
	<title>University of Calgary Scholarship</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
	

</head>
<body>
	<div class = "container">
		<div class="d-flex justify-content-center h-100">
			<div class = "card">
				<div class ="card-header">
					<h3>University of Calgary Scholarship Page</h3>
					<h4>Please Select One</h4>
				</div>
				<div class = "card-body">
					<div class = "form-group text-center">
						<form action="studentLogin.html">
							<input type = "submit" value = "Student" class= "btn login_btn"> <form>
						
						<form action="adminLogin.html">
							<input type = "submit" value = "Administrator" class= "btn login_btn">
						</form>
					</div>					
				</div>
			</div>
		</div>
	</div>
</body>
</html>
0 голосов
/ 20 февраля 2019

Чтобы исправить поле в мобильном размере: 

@media only screen and (max-width: 770px) {
 .card {
  margin: 0;
 }
}
0 голосов
/ 20 февраля 2019

Основываясь на решении @Vincent G, я изменил следующие строки для вашего последнего комментария: 

.card{
   height: calc(100vh - 20%);
   margin: 10% 15% 0 15%;
}

См. Скрипку

Поддержка браузера для calc и область просмотра

РЕДАКТИРОВАТЬ 1

В обновленном фрагменте кода вам не нужен мой вышеупомянутый фрагмент кода.

По сути, вы нарушаете отзывчивость, используя фиксированный height вашего класса .card и почти такую ​​же ошибку в ваших input полях.(margin-left и width)

См. Скрипку (Я отметил изменения в скрипке!)

Надеюсь, это решит вашу проблему:)

0 голосов
/ 20 февраля 2019

Добавьте это свойство, и оно должно работать как положено: 

html, body {
  height: 100%;
}

См. Эту скрипку

Кроме того, изображение, которое вы используете, очень большое (6144 x 4096пикселей), поэтому загрузка может занять несколько раз.Вы можете изменить его размер до 2000 пикселей в ширину и сжать его с помощью таких инструментов, как TinyPng:

https://tinypng.com/

РЕДАКТИРОВАТЬ

Вы можете использовать flex свойства для обработки выравнивания .card

.d-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

См. Эту скрипку

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...