Blog preview card test

Community feedback

• 

  Alex 🤸🏻‍♂️•1,710

  @sksksk2024

  Posted 6 months ago

  Bonjour, @Essosolim01 !!! 👋

  flex dans le body et abandonner les marges dans la carte : cela résoudra le problème. Voici quelques conseils utiles pour vous aider à pratiquer : Conseils en français pour améliorer les styles d'un projet web

  1. Utilisation de flexbox dans le body

  Pour un design adaptable et fluide, le système de flexbox est idéal. Voici comment configurer votre body avec flex pour aligner les éléments de manière optimale :

  body {
    display: flex;
    flex-direction: column; /* Alignement vertical */
    justify-content: center; /* Centrer les éléments verticalement */
    align-items: center; /* Centrer les éléments horizontalement */
    min-height: 100vh; /* S'adapte à la hauteur de l'écran */
    margin: 0; /* Évitez l'utilisation de `margin` ici */
  }
  

  2. Éviter l'utilisation de margin pour la mise en page générale

  Au lieu d'utiliser des marges fixes, préférez :

  padding pour un espacement interne.
  gap dans un container flex ou grid pour un espacement fluide entre les éléments.
  

  3. Abandonner les hauteurs fixes sur les cartes

  Permettre aux cartes de s’ajuster automatiquement améliore leur adaptation au contenu et à la taille des écrans. Exemple pour une carte adaptable :

  .card {
    width: 90%; /* Largeur adaptable */
    max-width: 300px; /* Largeur maximale */
    height: auto; /* Hauteur automatique */
    padding: 20px; /* Espacement interne */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre pour un style plus doux */
    border-radius: 10px; /* Coins arrondis */
  }
  

  4. Adaptation aux écrans de petites tailles

  Les media queries permettent d’ajuster les styles en fonction de la largeur de l’écran. Exemple :

  @media (max-width: 768px) {
    .card {
      width: 100%; /* Utiliser tout l'espace disponible */
      padding: 15px; /* Réduction de l'espacement interne */
    }
  
    body {
      padding: 10px; /* Ajouter de l'espace autour */
    }
  }
  

  5. Autres conseils pratiques

     Typographie : Utilisez des unités relatives comme em ou rem pour une meilleure adaptation. Espacement : Préférez gap dans un container flex ou grid pour espacer les éléments enfants. Images : Assurez-vous que les images soient fluides avec :

      img {
        max-width: 100%;
        height: auto;
      }
  

  Si vous avez besoin de plus d’aide ou d’exemples concrets, n’hésitez pas à demander ! 😊🔥

  11

  Marked as helpful