Here is the code snippet I am working with:
<div class="topbarsection">
<ul>
<li class="alignleft">
<a href="#">Office Address</a>
</li>
<li class="aligncenter">
Office Timings
</li>
<li class="alignright">
<a href="tel:0123456789">0123456789</a>
</li>
</ul>
</div>
This is how I've styled it using CSS:
.topbarsection {
background-color: #002e5b;
border-bottom: 1px solid #ddd;
color: #fff;
display: block;
font-family: Open Sans,arial;
font-size: 16px;
padding: 10px 5px;
position: fixed;
width: 100%;
z-index: 10000;
}
.topbarsection a {
color: #fff;
}
ul li {
display:inline;
list-style-type:none;
}
.alignleft {
float: left;
width:33.33333%;
text-align:left;
}
.aligncenter {
float: left;
width:33.33333%;
text-align:center;
}
.alignright {
float: left;
width:33.33333%;
text-align:right;
}
When viewed on Desktop browsers, the mobile number gets hidden as shown in screenshot 1.
On Mobile browsers, all three details appear in a single line instead of vertically stacked. It should look like this as shown in screenshot 3.