Create Responsive Header using CSS

muhammad...

SOLVED CLOSED ACTIVE ANSWERED
User: muhammad12
Posted: on Feb 08, 2023 03:31 AM
Forum: HTML and CSS
Answer: 1
Views: 1062
Sample Code: Download

Hi sir I have a header I want to adjust my labels like this.

Label1 label2 and button1 on left side and then other label and button2 on leftside with following formate in mobile view.

Logo label1 label2 label3 label4

Button1 label5 label6

Button2

<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">
                        <asp:Label ID="nameLabel" runat="server" Text="Label"></asp:Label>
                        <br />
                        pa-<asp:Label ID="paLabel" runat="server" Text="Label"></asp:Label>
                        <br />
                        <asp:Label ID="stationLabel" runat="server" Text="Label"></asp:Label>
                        <br />
                        <asp:Label ID="deptLabel" runat="server" Text="Label"></asp:Label>
                        <br />
                        <br />
                        <asp:Button ID="Button3" runat="server" Text="Sign Out" OnClick="Button3_Click" />
                    </i>
                </div>
                <asp:Label ID="dateLabel" runat="server" Text="Label"></asp:Label>
                <br />
                <asp:Label ID="flightLabel" runat="server" Text="Label" CssClass="a"></asp:Label>
                <br />
                <asp:Button ID="Button2" runat="server" Text="Flights" OnClick="Button2_Click" />
            </div>
        </div>
    </div>
</header>

<style type="text/css">
    .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: 12px 0; height: 50px; width: 150px; float: left; }

    .header-top .ht-left .mail-service .logo { display: inline-block; }

    .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: 15px; padding-bottom: 12px; padding-left: 20px; display: flex; width: 104px; height: 116px; margin-top: 0px; }

    .header-top .ht-left .phone-service i { margin-right: 5px; }

    .header-top .ht-right { float: right; }

    .header-top .ht-right .login-panel { float: right; font-size: 14px; color: #252525; display: inline-block; padding-left: 20px; border-left: 1px solid #e5e5e5; padding-top: 18px; padding-bottom: 15px; }

    .header-top .ht-right .login-panel i { margin-right: 8px; }

    .header-top .ht-right .lan-selector { float: right; margin-top: 15px; margin-bottom: 13px; }

    .header-top .ht-right .top-social { float: right; padding-right: 20px; padding-top: 15px; padding-bottom: 15px; border-right: 1px solid #e5e5e5; }

    .header-top .ht-right .top-social a { color: #252525; font-size: 14px; display: inline-block; margin-left: 15px; }
</style>

Download FREE API for Word, Excel and PDF in ASP.Net

AjayV

0 2

Reply
ANSWER
User: AjayV
Replied: on Feb 08, 2023 06:13 AM
Report

Hi muhammad12,

Please refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .header-top { display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid #e5e5e5; }
        .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; width: 64px; height: 65px; }
        .header-top .ht-left .mail-service .logo { padding: 12px 0; height: 55px; width: 85px; float: left; }
        .header-top .ht-left .mail-service .logo { display: inline-block; }
        .header-top .ht-left .mail-service i { margin-right: 5px; }
        .header-top .ht-right .login-panel { float: right; font-size: 14px; color: #252525; display: inline-block; padding-left: 20px; border-left: 1px solid #e5e5e5; padding-top: 18px; padding-bottom: 15px; }
        .ht-left { width: 1185px; }
        .container { width: 1231px; height: 148px; }
        .header-top .ht-left .phone-service { float: right; font-size: 15px; color: #252525; line-height: 15px; padding-top: 3px; padding-bottom: 12px; padding-left: 20px; display: flex; width: 104px; height: 116px; margin-top: 0px; } 
        .header-top .ht-left .phone-service i { margin-right: 5px; }        
        .header-top .ht-left .phone-service { float: left; }
        .header-top .ht-left .phone-service { float: right; display: inline; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <header class="header-section">
            <div class="header-top">
                <div class="container">
                    <div class="ht-left">
                     <div class="mail-service" style="float:left;">      
                            &nbsp;<img src="Penguins.jpg" style="width: 52px; height: 54px; margin-top: 0px;" />
                        </div>
                    <div style="float:left;padding-right:20px;">  
                           <asp:Label ID="dateLabel" runat="server" Text="Label1"></asp:Label>&nbsp;
                           <asp:Label ID="flightLabel" runat="server" Text="Label2"></asp:Label>
                           <br />
                           <br />
                           <asp:Button ID="Button2" runat="server" Text="Flights"  />
                        </div>
                       <div style="float:left;">
                        <div class="phone-service">
                           <asp:Label ID="nameLabel" runat="server" Text="Label3"></asp:Label>&nbsp;
                           <asp:Label ID="paLabel" runat="server" Text="Label4"></asp:Label>
                           <br /><br />
                           <asp:Label ID="stationLabel" runat="server" Text="Label5"></asp:Label>&nbsp;
                           <asp:Label ID="deptLabel" runat="server" Text="Label6"></asp:Label>
                           <br />
                           <br />
                          <asp:Button ID="Button3" runat="server" Text="Sign Out"  />
                      </div>
                      </div>
                    </div>
                </div>
            </div>
        </header>
    </form>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Create Responsive Header using CSS

Company

Explore

Follow us

Contact Us