When responsive mode icons not come properly - html

Question

Hi, I have a problem with responsive. When it's responsive mode I need 4 icons in single line. Same like web mode. Please help. I added code in image.
<ul class="nav nav-tabs first">
<li class="active" style="padding-right: 15px;">
<a href="#Mala" data-toggle="tab">
<img style="padding-bottom: 15px;" src="laalsa.com/business/wp-content/uploads/2018/07/Malaicon.png" alt="" width="144" height="144">
<br>Mala Connect</a></li>
<li style="padding-right: 15px;">
<a href="#LaalsaApp" data-toggle="tab">
<img style="padding-bottom: 15px;" src="laalsa.com/business/wp-content/uploads/2018/07/laalsaappicon.png" alt="" width="144" height="144">
<br>Laalsa App</a></li>
</ul>
<li style="padding-right: 15px;">
<a href="#Toran" data-toggle="tab">
<img style="padding-bottom: 15px;" src="laalsa.com/business/wp-content/uploads/2018/07/toranicon.png" alt="" width="144" height="144">
<br>Toran</a></li>
</ul>
<li style="padding-right: 15px;">
<a href="#Web" data-toggle="tab">
<img style="padding-bottom: 15px;" src="laalsa.com/business/wp-content/uploads/2018/07/webicon.png" alt="" width="144" height="144">
<br>Web</a></li>
</ul>

Answer 1

You need to add #media css. Try this
#media screen and (max-width: 767px){
.icons-parent-elements-class{
display:inline-block;
width:25%;
float:left;
}
}

Answer 2

To achieve that you have to change the width of each element to the number of elements divided by 100%. for example:
#media (min-width: 750px){
.icons-parent-elements-class {
width: 25%;
display: inline-block;
float: left;
}
}

Answer 3

HTML:-
<div class="container">
<div class="div1">
<img src="pathnameofimage.png">
</div>
<div class="div2">
<img src="pathnameofimage.png">
</div>
<div class="div3">
<img src="pathnameofimage.png">
</div>
for mobile screens use
CSS:-
#media(max-width: 767px){
.container{
display:flex;
justify-content:center;
flex-direction:column;
}
}

Answer 4

#media(max-width: 767px){
.nav-tabs.first li {
width: 25%;
margin: 0;
float: left;
padding-right: 8px !important;
}
.nav-tabs.first li a img {
width: 100%;
max-width: 80px !important;
height: auto!important;
margin: 0 auto;
display: inline-block;
}
}
please try it. if don't work then please share your code. and also remove the height and width form the image tag. these are creating problem in the responsive view.