Hi sir
I have header with 5 label at right side and a logo on left side.
I want to make it responsive by mobile view.
But my css shift first two label at next line at right side and next three remain at first line.
I want that list two should remain at first line and next three moves to next line of right side.
Like;
Label1 label2
Label3 label4 label5
Can u help me by edit by this code.
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div class="center">
<div class="preloder">
<div class="loader"></div>
</div>
<header class="header-section">
<div class="header-top">
<div class="container">
<div class="ht-left">
<div class="mail-service">
<div class="logo">
<img src="img/aairblue.png" alt=""/>
</div></div>
<div class="phone-service">
<i class=" fa fa-phone"></i>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
</div>
<div class="phone-service">
<i class=" fa fa-envelope"></i>
<asp:Label ID="Label5" runat="server" Text="Label"></asp:Label>
</div>
<div class="phone-service">
<i class=" fa fa-phone"></i>
<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
</div>
<div class="phone-service">
<i class=" fa fa-phone"></i>
<asp:Label ID="Label7" runat="server" Text="Label"></asp:Label>
</div>
<div class="phone-service">
<i class=" fa fa-phone"></i>
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
</div>
</div>
</div>
</div>
@media (max-width: 550px) {
.center {
margin: auto;
width: 100%;
background-color:white;
}
.header-top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-bottom: 1px solid #e5e5e5;
}
.header-top .ht-left .phone-service {
float: right;
}
.header-top .ht-left .mail-service {
font-size: 20px;
font-weight: bold;
color: #252525;
float: left;
border-right: 1px solid #E5E5E5;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 20px;
}
.header-top .ht-left .mail-service .logo {
padding: 10px 0;
height: 50px;
width: 60px;
float: left;
}
.header-top .ht-left .mail-service .logo {
display: inline;
}
.header-top .ht-left .mail-service .logo img {
padding: 8px 0;
height: 50px;
width: 70px;
float: left;
}
.header-top .ht-left .mail-service i {
margin-right: 5px;
}
.header-top .ht-left .phone-service {
float: right;
font-size: 15px;
color: #252525;
line-height: 15px;
padding-top: 10px;
padding-bottom: 12px;
padding-left: 20px;
display:flex;
}
.header-top .ht-left .phone-service i {
margin-right: 5px;
}
.header-top .ht-right {
float: right;
}