CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
flash
flash

Reputation: 1519

Aligning images in a straight line in a mobile view in html/css

I have a fiddle which I have replicated by seeing the screenshot below. The screenshot should be exactly the same in desktop/mobile/tablet view.

enter image description here

At this moment, my fiddle looks very good in the desktop view.

The CSS codes which I have used in the fiddle in order to align the images in a straight line in a desktop view are:

.images {
  display: flex;
  justify-content: space-between;
  align-items:center;
  background-color: #eee;
  padding: 1rem;
  flex-wrap: wrap;
}

.images img {
  width: auto;
  height: 2.5rem;
}



In the mobile view the images gets unorganized (as shown in the screenshot below).

enter image description here



Problem Statement:

I am wondering what CSS codes I should add in the fiddle, so that the images get aligned in a straight line both in mobile/tablet view.

I am pretty sure, I have to use media queries in order to align the images in a straight line but I am not sure what CSS codes I need to add there. I tried with the following CSS codes in the media queries but it didn't work. 

@media only screen and (max-width: 768px) {
    .images {
      width: 100%;
    }

    .images img {
      width: auto;
      height: 2.5rem;
    }
}

Upvotes: 1

Views: 568

Answers (1)

patelarpan
patelarpan

Reputation: 7991

Remove flex-wrap:wrap from .images. fiddle

.images {
  display: flex;
  align-items:center;
  background-color: #eee;
  padding: 1rem;
      margin-left: -15px;
    margin-right: -15px;
}

.images > div {
      flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
.images img {
  max-width:100%;
  width: 100%;
}
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Testing</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">


</head>

<body>

<div class="images">
<div>
<img src="https://s7.postimg.cc/abhy97dln/stripe.png" alt=""  class="alignleft size-full wp-image-7013">
</div>
<div>
<img src="https://s7.postimg.cc/8wgdkj9yj/global-franchise.png" alt=""class="alignleft size-full wp-image-7019">

</div>
<div>
<img src="https://s7.postimg.cc/ros8o6ynv/intuit_v1.png" alt="" class="alignleft size-full wp-image-7088">

</div>
<div>
<img src="https://s7.postimg.cc/6rw0jodjf/Franchise_Harbor.png" alt=""  class="alignleft size-full wp-image-7068">

</div>

<div>
<img src="https://s7.postimg.cc/ngxgf2f4b/Intercom.png" alt="" class="alignleft size-full wp-image-7070">

</div>
<div>
<img src="https://s7.postimg.cc/qb0lshepn/Inc.png" alt=""  class="alignleft size-full wp-image-7071">

</div>
<div>
<img src="https://s7.postimg.cc/6rw0jm8dn/Pay_Stand.png" alt="" class="alignleft size-full wp-image-7072">

</div>
<div>
<img src="https://s31.postimg.cc/krrywwkpn/imageedit_1_5492997247.png" alt="" class="alignleft size-full wp-image-7072">

</div>

</div>
</body>

</html>

Make two row in mobile.

.images {
  display: flex;
  align-items:center;
  background-color: #eee;
  padding: 1rem;
  
}

.images > div {
      flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.images img {
  max-width:100%;
  width: 100%;
}

@media screen and (max-width: 767px) {
.images {
flex-wrap: wrap;
}
.images > div {
    flex: 0 0 25%;
    max-width: 25%;
        padding-top: 10px;
    padding-bottom: 10px;
   
}

}
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Testing</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">


</head>

<body>

<div class="images">
<div>
<img src="https://s7.postimg.cc/abhy97dln/stripe.png" alt=""  class="alignleft size-full wp-image-7013">
</div>
<div>
<img src="https://s7.postimg.cc/8wgdkj9yj/global-franchise.png" alt=""class="alignleft size-full wp-image-7019">

</div>
<div>
<img src="https://s7.postimg.cc/ros8o6ynv/intuit_v1.png" alt="" class="alignleft size-full wp-image-7088">

</div>
<div>
<img src="https://s7.postimg.cc/6rw0jodjf/Franchise_Harbor.png" alt=""  class="alignleft size-full wp-image-7068">

</div>

<div>
<img src="https://s7.postimg.cc/ngxgf2f4b/Intercom.png" alt="" class="alignleft size-full wp-image-7070">

</div>
<div>
<img src="https://s7.postimg.cc/qb0lshepn/Inc.png" alt=""  class="alignleft size-full wp-image-7071">

</div>
<div>
<img src="https://s7.postimg.cc/6rw0jm8dn/Pay_Stand.png" alt="" class="alignleft size-full wp-image-7072">

</div>
<div>
<img src="https://s31.postimg.cc/krrywwkpn/imageedit_1_5492997247.png" alt="" class="alignleft size-full wp-image-7072">

</div>

</div>
</body>

</html>

Upvotes: 1

Related Questions