How to Display Different Images in a Row on Mobile and Desktop devices

Question

I have CSS script that display 4 images in a row.

Here's the results on desktops view:

However, when i switch to mobile i get that result:

How do i set it, so it will display 3 images in a row on mobile? Like that:

I have try to change the position and the overflow settings but all i get is the same result- it keeps dragging the 4th square to the bottom at mobile view.

Here's some code:

HTML:

<div><center>
<ul>
        <li>
            <label for="futurebox08"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
        </li>
         <li>
            <label for="futurebox09"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
        </li>
         <li>
            <label for="futurebox10"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png"  /></a></label>
        </li>
<li>
            <label for="futurebox11"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
        </li>
    </ul>

 <ul>
        <li>
            <label for="futurebox08"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
        </li>
         <li>
            <label for="futurebox09"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
        </li>
         <li>
            <label for="futurebox10"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png"  /></a></label>
        </li>
<li>
            <label for="futurebox11"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
        </li>
    </ul> 
  </center></div>

CSS:

body{
  margin: 0;
  overflow: hidden; 
  background: black
}

img {
  background-color:white;
  width:150px;
  height: 150px;}

div {
  position: absolute;
  left: 0;
  right: 0;
  top: 10%;
}

ul li
    {
  display: inline-block;
  list-style: none;
  margin: 0 25px 0 0;
  border: 5px solid #ccc;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
    }

 ul li:hover {  
  -moz-box-shadow: 0 0 8px 8px #3aaaf1;
   -webkit-box-shadow: 0 0 8px 8px#3aaaf1;
   box-shadow: 0 0 8px 8px #3aaaf1; }

  ul li img, ul li label 
        { 
   display: block; 
   cursor: pointer; 
        }

Here's a Live one: Codepen

Answer 1

img src.. is a fallback in case browser doesn't support picture tag:

<picture>
   <source 
      media="(min-width: 650px)"
      srcset="images/img1.png">
   <source 
      media="(min-width: 465px)"
      srcset="images/img2.png">
   <img src="images/img-default.png" 
   alt="a cute kitten">
</picture>

Answer 2

@StackBuck` try this code, use media queries and add viewPort to your code here is my codepen link

https://codepen.io/asiyafatima_12/pen/EraONN

body{
  margin: 0;
  overflow: hidden; 
  background: black
}
img {background-color:white;
  width:150px;
height: 150px;}

div {
  position: absolute;
  left: 0;
right: 0;
  top: 10%;
}

	ul li
	{
		display: inline-block;
		list-style: none;
		margin: 0 25px 0 0;
		border: 5px solid #ccc;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
		ul li:hover { 	-moz-box-shadow: 0 0 8px 8px #3aaaf1;
    -webkit-box-shadow: 0 0 8px 8px#3aaaf1;
    box-shadow: 0 0 8px 8px #3aaaf1; }
	
		ul li img, ul li label 
		{ 
			display: block; 
			cursor: pointer; 
		}

ul {
    width: 100%;
    max-width: 800px;
}

@media only screen and (max-width: 768px){
  ul {  max-width: 700px; }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">// add viewport to your code

<div><center>
<ul>
        <li>
			<label for="futurebox08"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
		</li>
         <li>
			<label for="futurebox09"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
		</li>
         <li>
			<label for="futurebox10"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png"  /></a></label>
		</li>
<li>
			<label for="futurebox11"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
		</li>
<!-- 	</ul> -->
 
<!--  <ul> -->
        <li>
			<label for="futurebox08"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
		</li>
         <li>
			<label for="futurebox09"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
		</li>
         <li>
			<label for="futurebox10"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png"  /></a></label>
		</li>
<li>
			<label for="futurebox11"><a href="#" target="new"><img src="https://test.io/wp-content/uploads/2017/02/testIO-logo-rgb.png" /></a></label>
		</li>
	</ul> 
  </center></div>

Answer 3

You could use CSS media queries in order to distinguish between desktop and mobile devices. This will allow you to provide a different set of CSS rules according to the device. In your case 1 set of rules would define each image as 1/3 window width and the other as 1/4 window width in order to allow them to align in a row according to your stated requirements.

Here is a simplified example:

/* Mobile */
@media only screen and (max-width: 480px) {
  img {
    max-width: 30%:
  }
}

/* Dekstop */
@media only screen and (min-width: 481px) {
  img {
    max-width: 25%:
  }
}

I don't want to code for you - since media queries are quite important in responsive web design and it would benefit you a whole lot if you take a bit of time to learn them - they're quite simple.

The pixel limit i have put are called "break-points" and they change according to mobile defices, but there are certain standards that usually work. There are tables online for figuring them out.

Here is a good article about media queries:

• https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width/

And here is a another good resource with break-points / devices tables:

• https://mediag.com/blog/popular-screen-resolutions-designing-for-all/

Bonus tip:

I would stop working with absolute pixel size values. There are different relative unit values like vw/vh(window-width/100, window-height/100), %(container width OR height / 100 ) and em and rem which are more flexible and useful for responsive design which supports more display.