When viewed on a mobile device, the contact information bar should vertically collapse

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.

htmlcssmobile

Answer №1

Your code has several issues that need attention.

  1. For better mobile responsiveness, consider using media queries.
  2. If you decide to float elements, make sure to use a clearfix to prevent parent collapsing.
  3. Remove default margin and padding on your unordered list (ul) element.
  4. Avoid unnecessary z-index values on the parent element.
  5. To ensure stacking at smaller sizes, set the width of list items (li) to 100% with display: block.

  6. Add a viewport metatag for mobile - check out WC3's recommendations.

  7. Please provide more detailed explanations in your posts!

Here is an updated version of your code - I have only made adjustments for screens under 480px. Feel free to expand on this example to enhance responsive design:

Let me know if this solution resolves your issues!

<div class="topbarsection clearfix">
   <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>

CSS

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

.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%;
}
.topbarsection a {
  color: #fff;
}
ul{
  margin-right: 2%;
  padding: 0;
}

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;
}

@media (max-width: 480px) {
  ul li{
    display: block;
    text-align: center;
    margin: 0;
  }
  .alignleft,
  .aligncenter,
  .alignright{
    width: 100%;
    text-align: center;
  }
}

Answer №2

Dear Ranjeet, I have a suggestion for you.

Please consider adding the following code to your head section:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Next, update your CSS with these modifications:

.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;
}

@media (min-width: 768px){
.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;
}
}

Lastly, make sure to explore media queries in depth!

Answer №3

If you're facing an alignment issue with your content within the .topbarsection div, consider adding a secondary wrapper div inside it. The problem likely lies in the padding, which is not being taken into account when the width is set to 100%, causing misalignment.

To rectify this, avoid using padding directly on the .topbarsection div. Instead, introduce a new .wrapper div with appropriate padding for your content to sit within.

To address another issue concerning the layout of your <li> elements under certain screen widths, explore utilizing a @media query to implement different CSS rules based on the screen size.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure that each of the two divs maintains a 16:9 aspect ratio, and utilize one div to fill any remaining empty space through the

This layout is what I am aiming for: While I can achieve a fixed aspect ratio with a 16:9 image by setting the img width to 100%, I run into an issue where the height scaling of flexbox becomes non-responsive. The height remains constant, and only the fir ...

javascripthtmlcssflexbox

Issues with navigation functionality in Internet Explorer 8 have been identified in Twitter Bootstrap 3 RC2

I am currently using Twitter Bootstrap 3 RC2 to create a navigation bar at the top of my page, which is working perfectly fine except on IE8. In IE8, it seems like the browser is rendering the page as if it were on a smaller screen, causing the menu to co ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Monitoring the content of a page with jQuery and adjusting the size as needed

Here is a code snippet: function adjustContainerHeight() { $('div#mainContainer').css({ 'min-height': $(document).height() - 104 // -104 compensates for a fixed header }).removeShadow().dropShadow({ 'blur&a ...

javascriptjqueryhtmlcss

What is the best way to design a three-color column layout without any text?

I am attempting to design a three-color column layout using Bootstrap without any text. I have successfully created the columns with the desired colors, but I am facing an issue regarding how to remove the text without affecting the size of the columns. W ...

htmlcssbootstrap-4

Display a full-width card beneath each small card in every row using CSS

In a scenario where I have designed a layout consisting of 3 column/row cards across multiple rows. Each card displays basic information, and when a user clicks on any specific card, a full-width card below that row will display more detailed information. ...

htmlcsscss-positioncardview

Receive a notification when the div element stops scrolling

I am attempting to replicate Android's expandable toolbar within an Angular component. My HTML code appears as follows: <div (scroll)="someScroll($event)"> <div class="toolbar"></div> <div class="body"></div> </d ...

javascripthtmlangularevents

Creating a bespoke Bootstrap 4 Modal experience without the backdrop

I'm attempting to show a Bootstrap 4 modal without a backdrop. I've tried the following code with no success: .modal.right. modal-backdrop.show { background-color: transparent !important; } When I try this modification, it works (but affect ...

htmlcssbootstrap-4

Calculating the total sum of values using a dropdown list as a filter with J

I have successfully implemented a dropdown filter in my jQuery datatable to filter data. However, I am now looking to calculate the sum of all values in the filtered table each time a user selects a value from the dropdown list. How can I achieve this? My ...

javascriptjqueryhtmldatatableshtml-select

Retrieving checkbox value upon form submission

Imagine having a form containing several checkboxes. Upon submitting the form, you aim to display all values of the selected checkboxes. <form> <input type="checkbox" id="product1" name="product1" value="12"> <input type="checkbox" id="prod ...

javascripthtml

The concept of CSS background-position

Hey there, I have a query regarding a sprite image that contains icons with both normal and hover effects. Here is the current CSS code I am using: .wi{ background-image:url(images/icons/small/wi.png); background-repeat:no-repeat; display:blo ...

csscss-spritesbackground-position

Photos inside a flexbox do not resize correctly

When placing 2 images inside a flexbox with the column direction, I anticipated that the images would resize accordingly when adjusting browser window size. However, this is not the case. Regardless of the CSS styles applied, I am unable to maintain the o ...

htmlcss

Restoring text boxes to their original styling

I've been working on a jQuery script that scans through form input elements and turns their border color to red if they are empty. When the submit button is pressed, it reassesses the elements; this time I'm trying to revert the textbox back to i ...

jqueryhtmlcss

Header logo not showing up on webpage

While working on a website template for a friend, I encountered an issue when uploading the site. The logo image was displaying perfectly fine on my local drive, but once uploaded, it showed as a broken image icon on the live website. Here is the code sni ...

htmlcssweb

Setting character limits within textareas based on CSS classes in a dynamic manner

I'm looking to develop a JavaScript function that can set text limits for multiple textareas at once using a class, allowing for flexibility in case specific textareas need to be exempt. However, I'm facing issues with my debuggers - Visual Studi ...

javascriptjquerycssdebugging

Concealing the footer on a webpage embedded within an iframe

<script> $(document).ready(function(){ $('.mydivclass').hide(); }); </script> Looking to embed Microsoft Forms in my HTML using an iframe. Can the footer of the Microsoft Forms be removed? ...

jqueryhtmliframecross-domain

Angular ensures that the fixed display element matches the size of its neighboring sibling

I have a unique challenge where I want to fix a div to the bottom of the screen, but its width should always match the content it scrolls past. Visualize the scenario in this image: The issue arises when setting the div's width as a percentage of the ...

htmlcssangularjstypescript

Position elements in the center of the page at 33.3333% width

I'm facing a challenge with centering elements that are floated left and have a width of 33.33333% on the page. I want the text inside these elements to remain aligned to the left, but I'm unsure how to go about centering the items: ul.home-pr ...

htmlcss

The two <p> elements are being pushed to the right column, which is not their intended display

A snippet of less.css code is available at this link: #content { overflow: hidden; width: 100%; p { float: left; width: 465px; padding: 0px 25px 0px 35px; margin: 0px; br { line-height: 2. ...

htmlcsscss-floatless

Minimize the number of clicks needed to navigate using the HTML/JavaScript navigation

On my website, I have a navigation bar that changes the contents of a div when a user clicks on an item. However, if the user clicks multiple times in quick succession, the content changes too many times. I want to ensure that the content only changes once ...

javascriptjqueryhtmlcss

Tips and tricks for stopping a jquery animation

I have created a hover effect for list items. When I hover over an item, it triggers an animation using the .animate() method. However, when I move my cursor away from the item, the hover animation continues until it reaches its end point. Is there a way ...

jqueryhtmlcssjquery-animate