Dev Faq
0
votes

HTML / CSS Lorsque je modifie la largeur du navigateur en petits ou xs pour tablettes et taille mobile, le contenu ne correspond pas à

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

1 commentaires

Votre arrière-plan prenant le temps de charger pourrait être dû à la taille de l'image, essayez de le comprimer. Si vous ne voulez pas sacrifier la qualité, envisagez d'ajouter un pré-chargeur à votre vue afin que vos actifs, y compris vos images, seront chargés avant que l'utilisateur ne voit votre site.

4 Réponses :

3
votes

Ajoutez cette propriété et cela devrait fonctionner comme prévu: xxx

Voir Ce violon

En outre, l'image que vous utilisez est très grande (6144 x 4096 pixels) afin qu'il puisse prendre des moments à charger. Vous pouvez le redimensionner à max 2000 px de largeur et comprimer avec des outils tels que Tinypng:

https: // tinypng.com/

EDIT

Vous pouvez utiliser les propriétés flex pour gérer l'alignement du .card xxx

Voir ce violon

2 commentaires

Ça marche! Toute suggestion sur la manière de réparer lorsque l'écran rétrécit la taille mobile ou XS que le conteneur s'adapte à l'intérieur?

Oui, avec Flex Properties, vous pouvez le faire, voir ma réponse mise à jour :)

0
votes

Pour fixer la marge de la taille mobile: 

@media only screen and (max-width: 770px) {
 .card {
  margin: 0;
 }
}

0 commentaires
1
votes

Basé sur la solution @vincent G, j'ai changé les lignes suivantes pour votre dernier commentaire: xxx

Voir le violon

Support de navigateur pour Calc et ViewPort

Modifier 1

dans votre extrait de code mis à jour Vous n'avez pas besoin de mon extrait de code mentionné ci-dessus.

Fondamentalement, vous cassez la réactivité en utilisant la hauteur fixe de Votre classe .card et à peu près la même erreur sur vos champs d'entrée . ( margin-gauche et largeur )

Voir le violon (j'ai marqué les changements dans le violon!)

J'espère que cela résoudra votre problème :)

1 commentaires

J'ai dû changer une partie de mon code. Et maintenant même si je le fais, cela ne redimensionnera pas le conteneur pour s'adapter à la plus petite largeur comme écran mobile. J'ai mis à jour mon code ci-dessus.

0
votes

HI Ceci est la standard HTML STRAND> et CSS STRY> CODE!

P> 

<!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 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor