Un morceau de CSS à modifier...

Fermé
towix147 Messages postés 2 Date d'inscription mercredi 21 novembre 2018 Statut Membre Dernière intervention 25 décembre 2018 - Modifié le 21 nov. 2018 à 16:04
Jithel Messages postés 843 Date d'inscription mercredi 20 juin 2018 Statut Membre Dernière intervention 31 août 2021 - 21 nov. 2018 à 16:37
Bonjour,
Je cherche à créer un site et je rencontre quelques petites difficultés:
J'aimerais implémenter des témoignages sur ma page d’accueil, ce qui est déjà fait mais je galère un peu pour la mise en forme et n'ayant jamais toucher au code auparavant, je suis débutant tout cela me parait fastidieux.
Donc voilà ma page avec les témoignages:


Les témoignages sont mis par blocs et collés à gauche et j'aimerais qu'ils soient à la suite en ligne horizontalement comme ça:


Et je vous fournis le code CSS associé:
@import url([https://fonts.googleapis.com/css?family=Roboto%3A300%2C400%29%3B]
@import url([https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);]
figure.snip1390 {
  font-family: 'Roboto', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #000000;
  text-align: center;
  font-size: 16px;
  background-color: #2C3447;
  padding: 30px;
  background-image: linear-gradient(-25deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip1390 *,
figure.snip1390 *:before,
figure.snip1390 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
figure.snip1390 figcaption {
  width: 100%;
}
figure.snip1390 h2,
figure.snip1390 h4,
figure.snip1390 blockquote {
  margin: 0;
}
figure.snip1390 h2,
figure.snip1390 h4 {
  font-weight: 300;
}
figure.snip1390 h2 {
  color: #ffffff;
}
figure.snip1390 h4 {
  color: #a6a6a6;
}
figure.snip1390 blockquote {
  font-size: 1em;
  padding: 45px 20px 40px 50px;
  margin-top: 30px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: inset -1.4px -1.4px 2px rgba(0, 0, 0, 0.3);
  text-align: left;
  position: relative;
}
figure.snip1390 blockquote:before {
  font-family: 'FontAwesome';
  content: "\201C";
  position: absolute;
  font-size: 70px;
  opacity: 0.25;
  font-style: normal;
  top: 0px;
  left: 20px;
}
figure.snip1390 .profile {
  width: 100px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.4);
  margin-bottom: 10px;
  border: solid 5px #A6A57A;
}


Merci pour les réponses, vous pouvez aller sur le site exoshopp.com également.
A voir également:

1 réponse

Jithel Messages postés 843 Date d'inscription mercredi 20 juin 2018 Statut Membre Dernière intervention 31 août 2021 171
21 nov. 2018 à 16:37
Il faut appliquer sur le parent la propriété

float: left;


Source :
https://stackoverflow.com/questions/19039403/horizontal-alignment-of-list-items
0