Un morceau de CSS à modifier...

towix147 Messages postés 2 Date d'inscription   Statut Membre Dernière intervention   -  
Jithel Messages postés 843 Date d'inscription   Statut Membre Dernière intervention   -
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   Statut Membre Dernière intervention   171
 
Il faut appliquer sur le parent la propriété

float: left;


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