Je n'arrive pas à comprendre comment centrer les listes pour les petits appareils. il ne reste pas au centre, il y a toujours un espace supplémentaire, j'ai utilisé le CSS d'alignement de texte et cela n'a toujours pas fonctionné. Je pense que mon approche pour créer des colonnes réactives est fausse. j'ai aussi essayé le flex wrap, il ne l'a pas réparé.

enter image description here

body {
  font-family: Nunito, sans-serif;
  color: rgba(0, 0, 0, .8);
  font-weight: 400;
  line-height: 1.4;
}

@font-face {
  font-family: "selawk";
  src: url("css/fonts/selwak.ttf");
}

a:hover {
  border-bottom: 3px solid #364067;
}

img {
  max-width: 100%;
  padding: 0;
  margin: 0 0 1.45rem
}

h1 {
  font-size: 2.25rem
}

h1,
h2 {
  padding: 0;
  margin: 0 0 1.45rem;
  color: inherit;
  font-weight: 700;
  text-rendering: optimizeLegibility;
  line-height: 1.1;
  font-family: 'selawk', Arial, sans-serif;
}

h2 {
  font-size: 1.62671rem
}

h3 {
  font-size: 1.38316rem
}

h3,
h4 {
  padding: 0;
  margin: 0 0 1.45rem;
  color: inherit;
  font-weight: 700;
  text-rendering: optimizeLegibility;
  line-height: 1.1
}

h4 {
  font-size: 1rem
}

@media only screen and (max-width: 3000px) and (min-width: 768px) {
  .wriaper {
    text-align: left;
  }
  .wriaper ul {
    display: flex;
    padding: 1px;
    list-style: none;
    justify-content: center;
  }
  .wriaper li {
    background-color: rgba(180, 236, 219, 0.52);
    width: 200px;
    height: 200px;
    margin: 60px;
    border-radius: 10px;
  }
  .eature-icon {
    text-align: center;
    padding-top: 50px;
    margin-top: 50px;
  }
  .spp {
    text-align: center;
    color: #1B7E61;
  }
  /* Animation */
  @keyframes fadeInUp {
    from {
      -webkit-transform: translate3d(0, 40px, 0);
      transform: translate3d(0, 40px, 0);
    }
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @-webkit-keyframes fadeInUp {
    from {
      -webkit-transform: translate3d(0, 40px, 0);
      transform: translate3d(0, 40px, 0);
    }
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  .animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
  }
  .animatedFadeInUp {
    opacity: 0;
  }
  .fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
  }
  *,
  *::after,
  *::before {
    box-sizing: border-box;
  }
}

@media only screen and (max-width: 768px) {
  ul {
    padding: 1px;
    list-style: none;
    justify-content: center;
  }
  li {
    background-color: rgba(180, 236, 219, 0.52);
    width: 200px;
    height: 200px;
    margin-inline: 250px;
    border-radius: 26px;
    list-style: none;
  }
  /* Animation */
  @keyframes fadeInUp {
    from {
      -webkit-transform: translate3d(0, 40px, 0);
      transform: translate3d(0, 40px, 0);
    }
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @-webkit-keyframes fadeInUp {
    from {
      -webkit-transform: translate3d(0, 40px, 0);
      transform: translate3d(0, 40px, 0);
    }
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  .animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
  }
  .animatedFadeInUp {
    opacity: 0;
  }
  .fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
  }
  *,
  *::after,
  *::before {
    box-sizing: border-box;
  }
  .feature-item {
    display: flex;
    margin-bottom: 60px
  }
  .feature-icon {
    background: linear-gradient(135deg, #ad2ab9, #ff618c);
    width: 50px;
    flex-basis: 50px;
    flex-shrink: 0;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin: 15px
  }
  .feature-icon>svg {
    display: block
  }
  .eature-icon {
    text-align: center;
    padding-top: 50px;
    margin-top: 50px;
  }
  .spp {
    text-align: center;
    color: #1B7E61;
  }
  .fonrt {
    margin-top: 10px;
  }
}
<h1>Testing font</h1>
<div class="animated animatedFadeInUp fadeInUp">
  <div class="wriaper">
    <ul>
      <li class="eature-item">
        <div class="eature-icon">
          <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z" fill="#1B7E43"/>
                                </svg>
        </div>
        <div class="spp"><strong>Secure</strong></div><span></span>
      </li>
      <li class="eature-item">
        <div class="eature-icon">
          <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z" fill="#1B7E43"/>
                                </svg>
        </div>
        <div class="spp"><strong>Secure</strong></div><span></span>
      </li>
      <li class="eature-item">
        <div class="eature-icon">
          <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z" fill="#1B7E43"/>
                                </svg>
        </div>
        <div class="spp"><strong>Secure</strong></div><span></span>
      </li>
    </ul>
  </div>
0
blockhead 7 avril 2020 à 02:05

3 réponses

Meilleure réponse

Vous pouvez utiliser use divs au lieu de ul / li et faire le positionnement avec flexbox.

Selon le style, vous pouvez interroger les médias pour modifier la flexion de la colonne à la ligne

https://jsfiddle.net/wf5n8yrx/

Index.html

<body>
  <h1>Testing font</h1>
  <div class="">
    <div class="wriaper">
      <div class="eature-item">
        <div class="eature-icon">
          <svg
            width="60"
            height="60"
            viewBox="0 0 60 60"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z"
              fill="#1B7E43"
            />
          </svg>
          <div class="spp"><strong>Secure</strong></div>
        </div>
        <span></span>
      </div>
      <div class="eature-item">
        <div class="eature-icon">
          <svg
            width="60"
            height="60"
            viewBox="0 0 60 60"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z"
              fill="#1B7E43"
            />
          </svg>
          <div class="spp"><strong>Secure</strong></div>
        </div>
        <span></span>
      </div>
      <div class="eature-item">
        <div class="eature-icon">
          <svg
            width="60"
            height="60"
            viewBox="0 0 60 60"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z"
              fill="#1B7E43"
            />
          </svg>
          <div class="spp"><strong>Secure</strong></div>
        </div>
        <span></span>
      </div>
    </div>
  </div>
</body>

Main.css

  .wriaper {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }
  .wriaper .eature-item {
    background-color: rgba(180, 236, 219, 0.52);
    width: 200px;
    height: 200px;
    margin: 60px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .eature-icon {
    text-align: center;
  }
  .spp {
    text-align: center;
    color: #1b7e61;
  }

  @media only screen and (min-width: 768px) {
    .wriaper {
      flex-direction: row;
      justify-content: center;
    }
  }
0
Stevetro 8 avril 2020 à 00:06

Vh et vw fonctionneront pour le redimensionnement en fonction de la fenêtre d'affichage.

Vh et vw représentent la hauteur et la largeur de la fenêtre.

Votre fichier css pourrait l'utiliser de cette façon ...

div
{
  height: 50vh;

}

0
jeremygblake 6 avril 2020 à 23:25

Puisque vous utilisez déjà flexbox, vous pouvez obtenir les résultats souhaités avec moins de code et sans @media du tout.

J'ai ajouté des notes dans l'extrait de code:

       @font-face { /* should be the first */
        font-family: "selawk";
        src: url("css/fonts/selwak.ttf");
       }
       *, /* should be second */
       *::after,
       *::before {
         box-sizing: border-box;
       }
    body {
        font-family: Nunito,sans-serif;
        color:rgba(0,0,0,.8);
        font-weight:400;
        line-height: 1.4;
       }
        
       a:hover {
        border-bottom: 3px solid #364067;
       }
    
       img {
        max-width:100%;
        padding:0;
        margin:0 0 1.45rem
       }
       h1 {
        font-size:2.25rem
       }
       h1,
       h2 {
        padding:0;
        margin:0 0 1.45rem;
        color:inherit;
        font-weight:700;
        text-rendering:optimizeLegibility;
        line-height:1.1;
        font-family: 'selawk', Arial, sans-serif;
       }
       h2 {
        font-size:1.62671rem
       }
       h3 {
        font-size:1.38316rem
       }
       h3,
       h4 {
        padding:0;
        margin:0 0 1.45rem;
        color:inherit;
        font-weight:700;
        text-rendering:optimizeLegibility;
        line-height:1.1
       }
       h4 {
        font-size:1rem
       }

.wriaper ul { 
  display: flex;
  height: 100%;  
  flex-flow: row wrap; 
  justify-content: space-between;
  align-items: center;
  width: 75%;
  min-width: 200px; /* limit it to children wanted width */
  margin: auto; /* center it */
/* override default style */
  padding: 0;   
  list-style: none; 
}
    
.wriaper li {
  background-color: rgba(180, 236, 219, 0.52);
  flex: 1 200px; /* limit size of children */
  margin: 60px 10px; /* seperate from each other */
  border-radius: 10px;
  overflow: hidden; 
}

.eature-icon { 
  text-align:center;
  margin: 50px auto;
}
.spp{
  text-align: center;
  color: #1B7E61;
  margin-bottom: 50px;
}

            /* Animation */
    
            @keyframes fadeInUp {
                from {
                    -webkit-transform: translate3d(0, 40px, 0);
                    transform: translate3d(0, 40px, 0);
                }
    
                to {
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                    opacity: 1;
                }
            }
    
            @-webkit-keyframes fadeInUp {
                from {
                    -webkit-transform: translate3d(0, 40px, 0);
                    transform: translate3d(0, 40px, 0);
                }
    
                to {
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                    opacity: 1;
                }
            }
    
            .animated {
                animation-duration: 1s;
                animation-fill-mode: both;
                -webkit-animation-duration: 1s;
                -webkit-animation-fill-mode: both;
            }
    
            .animatedFadeInUp {
                opacity: 0;
            }
    
            .fadeInUp {
                opacity: 0;
                animation-name: fadeInUp;
                -webkit-animation-name: fadeInUp;
            }
        <h1>Testing font</h1>
        <div class="animated animatedFadeInUp fadeInUp">
            <div class="wriaper">
                <ul>
                    <li class="eature-item">
                        <div class="eature-icon">
                            <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z" fill="#1B7E43"/>
                                </svg>
                            </div><div class="spp"><strong>Secure</strong></div><span></span>
                    </li>
                    <li class="eature-item">
                        <div class="eature-icon">
                            <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z" fill="#1B7E43"/>
                                </svg>
                            </div><div class="spp"><strong>Secure</strong></div><span></span>
                    </li>
                    <li class="eature-item">
                        <div class="eature-icon">
                            <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 25V17.5C17.5 14.1848 18.817 11.0054 21.1612 8.66117C23.5054 6.31696 26.6848 5 30 5C33.3152 5 36.4946 6.31696 38.8388 8.66117C41.183 11.0054 42.5 14.1848 42.5 17.5V25H45C46.3261 25 47.5978 25.5268 48.5355 26.4645C49.4732 27.4022 50 28.6739 50 30V50C50 51.3261 49.4732 52.5978 48.5355 53.5355C47.5978 54.4732 46.3261 55 45 55H15C13.6739 55 12.4021 54.4732 11.4645 53.5355C10.5268 52.5978 10 51.3261 10 50V30C10 28.6739 10.5268 27.4022 11.4645 26.4645C12.4021 25.5268 13.6739 25 15 25H17.5ZM15 30V50H45V30H15ZM22.5 25H37.5V17.5C37.5 15.5109 36.7098 13.6032 35.3033 12.1967C33.8968 10.7902 31.9891 10 30 10C28.0109 10 26.1032 10.7902 24.6967 12.1967C23.2902 13.6032 22.5 15.5109 22.5 17.5V25ZM35 35H40V45H35V35Z" fill="#1B7E43"/>
                                </svg>
                            </div><div class="spp"><strong>Secure</strong></div><span></span>
                    </li>
                </ul>
    
    
    
            </div>
0
A. Meshu 7 avril 2020 à 00:15