Создание элемента списка (ul / li) Mobile Friendly / Отзывчивый в HTML и CSS

Question

На рабочем столе рядом с нижним колонтитулом находится столбец с надписью «Как видно». На рабочем столе это работает правильно, и все логотипы сосредоточены в одной строке. Тем не менее, он делает то же самое для мобильных и мобильных устройств. Мне нужно, чтобы логотипы были сложены вместо одной одной строки, чтобы вы не прокручивали вправо на своем телефоне или планшете.

I ' Я не уверен на 100%, но думаю, что мне нужен медиа-запрос, но я немного новичок в форматировании CSS.

HTML:

<div class="wrap">
  <h3><strong>We are fortunate to work with exceptional brands</strong></h3>
  <ul class="clients">
    <li><a href=""><img src="https://webslides.tv/static/images/logos/google.svg" alt="Google"></a></li>
    <li><a href=""><img src="https://webslides.tv/static/images/logos/airbnb.svg" alt="Airbnb"></a></li>
    <li><a href=""><img src="https://webslides.tv/static/images/logos/apple.svg" alt="Apple"></a></li>
    <li><a href=""><img src="https://webslides.tv/static/images/logos/microsoft.svg" alt="Microsoft"></a></li>
  </ul>
</div>

CSS:

.wrap {
  padding: 4.8rem;
  position:relative;
  width: 90%;
}
h3 {
  font-size:2.4rem;
  font-weight: 600;
  text-align:center;
}
.clients {
    align-items: center;
    -webkit-box-align: center;
    display: grid;
    gap: 4.8rem 4.8rem;
    grid-template-columns: auto auto;
    justify-items: center;
    margin: 4.8rem auto;
    max-width: 1024px; }

.clients li {
  list-style: none;
  margin: 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.clients img {
  height: 3.2rem;

}
.clients:hover li {
filter: blur(0px);
-webkit-filter: blur(0px);
}
.clients:hover li:not(:hover)  {
filter: blur(2px);
-webkit-filter: blur(2px);
}
.clients li:hover {
-webkit-transform: translateY(-0.3rem);
transform: translateY(-0.3rem); 
}

@media (min-width: 1024px) {
.clients {
    grid-template-columns: auto auto auto auto; }

.clients img {
  height: 4rem; }}

/* --- Images (gray logo) --- */
.clients img {
  -webkit-filter: grayscale(100%) brightness(10%) contrast(10%);
          filter: grayscale(100%) brightness(10%) contrast(10%); }

.clients img:hover {
  background: none;
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out; }

Answer 1

это поможет вам, я ответил на код, где вы можете установить его на многих экранах.

<style>

.wrap {
            width: 100%;
            height: auto;
            float: left;
            margin: 0;
            padding: 0;
        }

        .wrap h3 {
            font-size: 2.4rem;
            line-height: 2.4rem;
            font-weight: 600;
            text-align: center;
            display: block;
        }

        .clients {
            display: flex;
            padding: 0;
            justify-content: center;
        }

        .clients li {
            list-style: none;
            margin: 0 20px;
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
        }

        .clients img {
            height: 3.2rem;
        }

        .clients:hover li {
            filter: blur(0px);
            -webkit-filter: blur(0px);
        }

        .clients:hover li:not(:hover) {
            filter: blur(2px);
            -webkit-filter: blur(2px);
        }

        .clients li:hover {
            -webkit-transform: translateY(-0.3rem);
            transform: translateY(-0.3rem);
        }

        @media (min-width: 320px) and (max-width: 768px) {
            .clients {
                display: table;
                padding: 0;
                justify-content: center;
                margin: 0 auto;
                text-align: center;
            }
        }
        /* --- Images (gray logo) --- */

        .clients img {
            -webkit-filter: grayscale(100%) brightness(10%) contrast(10%);
            filter: grayscale(100%) brightness(10%) contrast(10%);
        }

        .clients img:hover {
            background: none;
            -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
        }


</style>


<div class="wrap">
        <h3>We are fortunate to work with exceptional brands</h3>
        <ul class="clients">
            <li>
                <a href="javascript:void(0);"><img src="https://webslides.tv/static/images/logos/google.svg" alt="Google"></a>
            </li>
            <li>
                <a href="javascript:void(0);"><img src="https://webslides.tv/static/images/logos/airbnb.svg" alt="Airbnb"></a>
            </li>
            <li>
                <a href="javascript:void(0);"><img src="https://webslides.tv/static/images/logos/apple.svg" alt="Apple"></a>
            </li>
            <li>
                <a href="javascript:void(0);"><img src="https://webslides.tv/static/images/logos/microsoft.svg" alt="Microsoft"></a>
            </li>
        </ul>
    </div>

Демо

Answer 2

Установка одного столбца для вашей сетки в стиле по умолчанию может решить вашу проблему ... пожалуйста, проверьте, исправлена ​​ли ваша проблема с помощью следующей модификации.

.wrap {
  padding: 4.8rem;
  position:relative;
  width: 90%;
}
h3 {
  font-size:2.4rem;
  font-weight: 600;
  text-align:center;
}
.clients {
    align-items: center;
    -webkit-box-align: center;
    display: grid;
    gap: 4.8rem 4.8rem;
    grid-template-columns: auto; //I edited this line
    justify-items: center;
    margin: 4.8rem auto;
    max-width: 1024px; }

.clients li {
  list-style: none;
  margin: 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.clients img {
  height: 3.2rem;

}
.clients:hover li {
filter: blur(0px);
-webkit-filter: blur(0px);
}
.clients:hover li:not(:hover)  {
filter: blur(2px);
-webkit-filter: blur(2px);
}
.clients li:hover {
-webkit-transform: translateY(-0.3rem);
transform: translateY(-0.3rem); 
}

@media (min-width: 768px) {
  
  .clients {
    grid-template-columns: auto auto; //For tablet
    }
  
}

@media (min-width: 1024px) {
.clients {
    grid-template-columns: auto auto auto auto; }

.clients img {
  height: 4rem; }}

/* --- Images (gray logo) --- */
.clients img {
  -webkit-filter: grayscale(100%) brightness(10%) contrast(10%);
          filter: grayscale(100%) brightness(10%) contrast(10%); }

.clients img:hover {
  background: none;
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out; }

<div class="wrap">
  <h3><strong>We are fortunate to work with exceptional brands</strong></h3>
  <ul class="clients">
    <li><a href=""><img src="https://webslides.tv/static/images/logos/google.svg" alt="Google"></a></li>
    <li><a href=""><img src="https://webslides.tv/static/images/logos/airbnb.svg" alt="Airbnb"></a></li>
    <li><a href=""><img src="https://webslides.tv/static/images/logos/apple.svg" alt="Apple"></a></li>
    <li><a href=""><img src="https://webslides.tv/static/images/logos/microsoft.svg" alt="Microsoft"></a></li>
  </ul>
</div>