Dans ma page, j'ai un en-tête, un pied de page et un conteneur id="item" contenant une liste de quatre éléments et leurs logos. J'essaie d'adapter le conteneur item en fonction de la taille de l'écran afin que la page entière s'adapte toujours à l'écran et je n'ai pas à faire défiler quelle que soit la taille de l'écran.

Mais je ne sais pas comment rendre le conteneur item réactif, y compris leurs logos en fonction de la taille de l'écran. J'ai essayé plusieurs options, mais aucune ne semble fonctionner parfaitement.

C'est ce que j'ai fait jusqu'à présent. Merci en avance pour vos suggestions:

Et voici le violon.

html,
body {
	width: 100%;
	height: 100%;
	min-height: 100%;
	background: #66B34E;
	color: #efefef;
}

.container {
	max-width: unset;
}

.title {
	background: #187be1;
	padding: 20px;
	width: 100%;
	font-size: 11px;
	color: aliceblue;
	bottom: 0px;
	right: 0px;
	left: 0px;
	text-align: center;
	text-decoration: none;
	margin-top: 7px;
	margin-bottom: 50px;
}

.list {
	max-height: 60%;
	max-width: 100%;
}

.menu {
	background: #f8f8f8;
	border-radius: 0;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
	padding: 20px;
	width: 100%;
	font-size: 11px;
	color: black;
	bottom: 0px;
	right: 0px;
	left: 0px;
	text-align: center;
	text-decoration: none;
}

.footer {
	position: fixed;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	background-color: #434A54;
	text-align: center;
	font-size: 12px;
	padding-top: 7px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container title"><br>This is the header<br><br></div>
<div class="container list" id="item">
   <div class="container">
      <div class="row">
         <div class="col-6 menu"> <img src="https://www.google.co.uk/images/srpr/logo11w.png"/> <br>
            Item 1
         </div>
         <div class="col-6 menu"><img src="https://www.google.co.uk/images/srpr/logo11w.png"/><br>
            Item 2
         </div>
      </div>
      <div class="row">
         <div class="col-6 menu"><img src="https://www.google.co.uk/images/srpr/logo11w.png"/><br>
            Item 3
         </div>
         <div class="col-6 menu"><img src="https://www.google.co.uk/images/srpr/logo11w.png"/><br>
            Item 4
         </div>
      </div>
   </div>
</div>
<div class="container footer"><br>
   This is the footer<br>
</div>
0
Ashonko 11 avril 2018 à 21:58

3 réponses

Meilleure réponse

Vous #item devriez déjà être sensible à la fenêtre. Essayez d'ajouter

#item img {
    max-width: 100%;
}
html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: #66B34E;
  color: #efefef;
}

.container {
  max-width: unset;
}

.title {
  background: #187be1;
  padding: 20px;
  width: 100%;
  font-size: 11px;
  color: aliceblue;
  bottom: 0px;
  right: 0px;
  left: 0px;
  text-align: center;
  text-decoration: none;
  margin-top: 7px;
  margin-bottom: 50px;
}

.list {
  max-height: 60%;
  max-width: 100%;
}

.menu {
  background: #f8f8f8;
  border-radius: 0;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  padding: 20px;
  width: 100%;
  font-size: 11px;
  color: black;
  bottom: 0px;
  right: 0px;
  left: 0px;
  text-align: center;
  text-decoration: none;
}

#item img {
  max-width: 100%;
}

.footer {
  position: fixed;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background-color: #434A54;
  text-align: center;
  font-size: 12px;
  padding-top: 7px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container title"><br>This is the header<br><br></div>
<div class="container list" id="item">
  <div class="container">
    <div class="row">
      <div class="col-6 menu"> <img src="https://www.google.co.uk/images/srpr/logo11w.png" /> <br> Item 1
      </div>
      <div class="col-6 menu"><img src="https://www.google.co.uk/images/srpr/logo11w.png" /><br> Item 2
      </div>
    </div>
    <div class="row">
      <div class="col-6 menu"><img src="https://www.google.co.uk/images/srpr/logo11w.png" /><br> Item 3
      </div>
      <div class="col-6 menu"><img src="https://www.google.co.uk/images/srpr/logo11w.png" /><br> Item 4
      </div>
    </div>
  </div>
</div>
<div class="container footer"><br> This is the footer<br>
</div>
2
Ghostrydr 11 avril 2018 à 19:02

Vous pouvez obtenir le résultat souhaité avec les propriétés display: table et display: table-cell. Essayez ce code.

<li class='navUsernameLi'>
<div class="inner">
  <img class='navProfilePicture' src='http://via.placeholder.com/350x150'>
  <p class='navUsernameP'>Username</p>
  </div>
</li>

.navUsernameLi {
  float: right;
  margin-top: 10px;
}
.inner {
  display: table;
}

.navProfilePicture {
  display: table-cell;
  border-radius: 50px;
  vertical-align: inherit;
  height: 24px;
  width: 24px;
  vertical-align: middle;
}
.navUsernameP {
  display: table-cell;
  vertical-align: middle;
}
0
Aryan Twanju 11 avril 2018 à 19:28

Pour obtenir un conteneur #item de taille normale, vous devez remplacer .container par .d-flex. .container a des padding et max-width par défaut définis dans Bootstrap que .d-flex n'a pas.

Vous pouvez également ajouter la classe img-fluid à tous vos logos et les faire tenir dans leur conteneur.

J'ajoute ces corrections au violon.

    html,
body {
	width: 100%;
	height: 100%;
	min-height: 100%;
	background: #66B34E;
	color: #efefef;
}

.title {
  align-items: center;
	background: #187be1;
  height: 80px;
	width: 100%;
	font-size: 11px;
	color: aliceblue;
	justify-content: center;
	text-decoration: none;
	margin-top: 7px;
	margin-bottom: 50px;
}

.list {
  height: calc(100vh - 187px);
  background: red;
 }

.menu {
	background: #f8f8f8;
	border-radius: 0;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
	padding: 20px;
	font-size: 11px;
	color: black;
	text-align: center;
	text-decoration: none;
}

.footer {
  color: white;
  align-items: center;
	position: fixed;
  height: 50px;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	background-color: #434A54;
	justify-content: center;
	font-size: 12px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex title"><br>This is the header<br><br></div>
<div class="list d-flex align-items-stretch row" id="item">
         <div class="col-6 align-items-center d-flex menu">
         <figure>
         <img src="https://www.google.co.uk/images/srpr/logo11w.png" class="img-fluid"/> <br>
            Item 1</figure>
         </div>
         
         <div class="col-6 align-items-center d-flex menu">
         <figure>
         <img src="https://www.google.co.uk/images/srpr/logo11w.png" class="img-fluid"/><br>
            Item 2</figure>
         </div>
         
         <div class="col-6 align-items-center d-flex menu">
         <figure>
         <img src="https://www.google.co.uk/images/srpr/logo11w.png" class="img-fluid"/><br>
            Item 3</figure>
         </div>
         
         <div class="col-6 align-items-center d-flex menu">
         <figure>
         <img src="https://www.google.co.uk/images/srpr/logo11w.png" class="img-fluid"/><br>
            Item 4</figure>
         </div>
         
      </div>
<div class="d-flex footer">
   This is the footer
</div>
0
Laura 12 avril 2018 à 20:54