CODEWITHSUNDEEP
htmlcssresponsive
matheus willame
matheus willame

Reputation: 3

Making a List Element (ul/li) Mobile Friendly/Responsive in HTML and CSS

We have a "As Seen On" press column on desktop near the footer. On desktop it works properly and the logos are all centered on one line. However, it does the same for mobile and on mobile I need the logos to be stacked instead of all one one line so you don't scroll all the way to the right on your phone or tablet.

I'm not 100% sure but I think I need a media query but I am kinda new to formatting 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; }

Upvotes: 0

Views: 1179

Answers (2)

Rameez Bukhari
Rameez Bukhari

Reputation: 486

this will help you, i've responsive the code where you can set it on many screens.

<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>

Demo

Upvotes: 1

Shahril Ahmed Siddiquee
Shahril Ahmed Siddiquee

Reputation: 26

Setting a single column for your grid in default style may solve your problem... please, check if your problem is fixed by this following modification.

.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>

Upvotes: 0

Related Questions