Ce Layout responsive est-il possible ?

**Gaulouis** · 14/05/2022, 20h52

Bonjour,

Quelqu'un saurait s' il est possible de faire ce layout en responsive ? Si oui, comment ?

Nom : layout-responsive.png
Affichages : 150
Taille : 46,1 Ko

Nom : layout-responsive.png
Affichages : 150
Taille : 46,1 Ko

Nom : layout-responsive-2.png
Affichages : 143
Taille : 28,6 Ko

Crdlt

**mathieu** · 14/05/2022, 21h50

tout est toujours possible

avez-vous essayé avec une mise en page flexbox ?
https://developer.mozilla.org/fr/doc...pts_of_Flexbox

**Gaulouis** · 15/05/2022, 17h57

Voici mon premier essai:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
html, body { height:100%; margin:0; padding:0;}
body {
	flex-flow: column nowrap;
	place-content: stretch center;
	align-items: normal;
	margin: auto;
	display: flex;
}
.wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: top;
	align-content: stretch;
}
.content {
	border:solid 1px blue;
	width:50%;
	min-width:400px;
	max-width:600px;
}

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
	<meta content="utf-8" http-equiv="encoding" />
	<meta charset="utf-8" />
	<title>Reaction</title>
 
	<style type="text/css">
 
        </style>
</head>
<body>
<div class="wrapper">
	<div class="content"">
		Wellcome...
		<p>+</p>
		<p>+</p>
		<p>+</p>
		<p>+</p>
		<p>+</p>
		<p>+</p>
		<p>+</p>
	</div>
</div>
</body>
</html>

Mon .content est bien affiché au centre de ma page. Cependant,

Dès que je sous dimensionne la fenêtre les scrollbars apparaisse bien mais mon .content est rogner.

Quelqu'un aurais une solution a ce problème a me proposer ?

**mathieu** · 15/05/2022, 18h19

vous avez essayé avec quel navigateur ? avec firefox je ne vois pas de souci jusqu'à 400 px de large.

**Gaulouis** · 15/05/2022, 18h32

Dès que je sous dimensionne la fenêtre les scrollbars apparaisse bien mais mon .content est rogner.

On est d'accord, au-dessus de 400px cela fonctionne.

Le problème arrive quand je suis en dessous de 400px. les scrollbars ne me permettent pas d'afficher le contenu. C'est croppé, rogner, découpé, disparu... Et pareil en vertical. C'est comme si j'avais utilisé la propriété position: absolute
Nom : cropped.png
Affichages : 104
Taille : 2,4 Ko

Nom : cropped.png
Affichages : 104
Taille : 2,4 Ko

**mathieu** · 15/05/2022, 18h49

si on prend par exemple l'iphone 4 sorti il y a 10 ans, la largeur de l'écran est de 600 px. donc pour une application grand public vous n'avez pas besoin de descendre en dessous, sauf si vous avez peut-être un public particulier ?

Ce Layout responsive est-il possible ?

Responsive design en CSS

Vue hybride

Discussions similaires

Partager

Partager