/*
See
https://stackoverflow.com/questions/38415499/making-a-list-element-ul-li-mobile-friendly-responsive-in-html-css
*/
::
.press {
display: block; /* Remove bullet points; allow greater control of positioning */
padding: 0; /* Override defaults for lists */
margin: 0; /* Override defaults for lists */
width: 100%; /* Get the row full width */
}
.press li {
display: inline-block; /* Get all images to show in a row */
width: 25%; /* Show 4 logos per row */
text-align: center; /* Centre align the images */
}
@media (max-width: 960px) and (min-width: 501px) {
.press li { width: 50%; } /* Show 2 logos per row on medium devices (tablets, phones in landscape) */
}
@media (max-width: 500px) {
.press li { width: 100%; } /* On small screens, show one logo per row */
}
/*
Run code snippetExpand snippet
In essence, what my code does is:
Set up a rudimentary grid system
Show four logos on large screens
Show two logos on medium screens
Show only one logo on small screens
If you don't want to be restricted to showing a set number of logos, you could do the following:
View on JSFiddle https://jsfiddle.net/5m0whf3k/
*/
.press {
display: table; /* Required for table-cell to work on li's */
padding: 0; /* Override defaults for lists */
margin: 0; /* Override defaults for lists */
width: 100%; /* Get the row full width */
text-align: center; /* Centre align grid items */
}
.press li {
display: table-cell; /* Get all images to show in a row */
text-align: center; /* Centre align the images */
}
@media (max-width: 960px) and (min-width: 501px) {
.press li { width: 50%; } /* Show 2 logos per row on medium devices (tablets, phones in landscape) */
}
@media (max-width: 500px) {
.press li { width: 100%; } /* On small screens, show one logo per row */
}
@media (max-width: 960px) {
.press {
display: block;
}
.press li {
display: inline-block;
}
}