Eléphanteau du PHP |
17 Messages
25 févr. 2023, 19:07
Bonjour je débute en html et css, je ne comprends pas pourquoi mon image ne se colle pas à droite en mode responsive (quand je rétrécie la fenêtre par exemple) ?
</head>
<body>
<div class="livraison">
Livraison gratuite pour commandes de plus de 100€
</div>
<div class="logopack">
<img src="Logo/Logo-cybèle.png" alt="Logo" class="logo">
<p>7 rue Beaubourg à Paris / Du lundi au samedi de 11 à 19h / +33 1 09 08 07 06
</div>
<a href="#">S'inscrire / se connecter</a>
<header>
<div class="navgauche">
<a href="#">Accueil</a>
<a href="#">Œuvres</a>
<a href="#">Artistes</a>
<a href="#">Agenda</a>
<a href="#">Lieu</a>
<a href="#">Contact</a>
</div>
<div class="navdroite">
<a href="#">Carte cadeau</a>
<a href="#">Panier</a>
</div>
</header>
<main class="slide">
<div class="expo">
<img src="Logo/amelie-maison-art-02.png" alt="menu picture">
</div>
</main>
<main class="logis">
<div class="livraisons">
<i class="fa-solid fa-truck"></i> <br>
Livraisons garanties <br>
par des transporteurs spécialisés
</div>
<div class="paiement">
<i class="fa-solid fa-lock"></i> <br>
Paiement sécurisés <br>
par CB ou 3x sans frais
</div>
<div class="retours">
<i class="fa-solid fa-rotate-left"></i> <br>
Retours gratuits <br>
15 jours pour changer d’avis
</div>
</main>
</body>
</html>
.livraison {
background-color: blue;
color: white;
padding: 0.6rem;
font-size: 12px;
text-align: center;
font-family: 'Roboto', sans-serif;
}
.logo {
width: 11.5rem;
padding: 0.6rem;
}
header {
display: flex;
justify-content: space-between;
font-family: 'Roboto', sans-serif;
}
header nav li {
list-style-type: none;
font-family: 'Roboto', sans-serif;
}
a {
margin: 12px;
text-decoration: none;
color: blue;
}
.ul .small {
display: flex;
justify-content: space-between;
}
@media screen and (min-width: 768px) {
header nav li {
display: inline;
}
p {
font-size: 11.5px;
font-family: 'Roboto', sans-serif;
color: grey;
}
.logopack {
display: flex;
align-items: flex-end;
justify-content: flex-start;
}
.logis {
color: #0000FF;
font-family: 'Roboto', sans-serif;
display: flex;
align-items: baseline;
justify-content: center;
}
.livraisons
{
text-align: center;
margin: 30px;
}
.paiement
{
text-align: center;
margin: 30px;
}
.retours
{
text-align: center;
margin: 30px;
}
i {
font-size: 21px;
margin-bottom: 19px;
}
.second {
font-size: 13px;
}
img {
display: flex;
}
}
