Text Alignment Issue in Icon Bar of Zurb Foundation 5

There's an unusual problem I'm encountering with the alignment of text under the icon bar not being properly centered below the icons.

Here is a snippet of the code:

<div class="row">
  <div class="small-12 columns">
    <div class="icon-bar five-up small"">>
      <a class="item" a href="/index.html"&>
        <i class="fi-home"&></i>
        <div<
          <label>Home</label>
        </div>
      </a>
      <a class="item" a href="/cart.html">
        <i class="fi-shopping-cart"<><>/i>
        <div>
          <label>Cart</label>
        </div>
      </a>
      <a class="item" a href="/pages/about-us">
        <i class="fi-info"<><>/i>
        <div>
          <label>About</label>
        </div>
      </a>
      <a class="item" a href="/pages/contact-us">
        <i class="fi-mail"<><>/i>
        <div>
          <label>Contact</label>
        </div>
      </a>
      <a class="item" a href="/account/login">
        <i class="fi-torso"<><>/i>
        <div>
          <label>Account</label>
        </div>
      </a>
    </div>
  </div>
</div>

I've attempted to center the labels without success. Has anyone run into similar issues before? Unfortunately, I can't provide a screenshot at the moment as this account is new. However, it appears that the contact label and account label start from the left of the icon and move towards the right instead of aligning with the actual icon box.

Answer №1

Your issue stems from a CSS problem in the foundation framework, specifically with the "padding" property defined here:

.icon-bar > * {
   font-size: 1rem;
   padding: 1.25rem;
}

To resolve this issue, you should incorporate a media query for mobile devices. Consider implementing something similar to the following:

@media (max-width: 400px) {
  a.item {
    padding-left: 0;
    padding-right: 0;
    position: relative;
    text-align: center;
  }
}

Adjust the value of 400px based on your specific resolution. If the issue persists due to conflicting CSS styles, use the !important declaration for padding-left and padding-right:

padding-left: 0 !important;
padding-right: 0 !important;

For reference, view this example on JSFiddle

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

Click Event for Basic CSS Dropdown Menu

My goal is to develop a straightforward feature where a dropdown menu appears below a specific text field once it is clicked. $(".val").children("div").on("click", function() { alert("CLICK"); }); .container { display: inline-block; } .val { d ...

Selecting the correct data type for react-icons

I'm currently working on designing a navigation bar with a customized type to utilize the map() function. My goal is to display an icon for each entity, so that the icon appears in front of the text within the navbar. However, I am encountering diffic ...

Strange behavior in Internet Explorer when using jQuery to simulate a click on an input=file element

My customized jQuery and HTML code achieves the following purpose: There is a placeholder image that can be clicked by the user, triggering a file selection dialog to open. Once a file is chosen, the corresponding multipart form is sent to the server. To ...

Utilizing Django fixtures: Importing HTML content as JSON into a Text Field

Currently in the process of transitioning my website to Django from another content management system, I am facing challenges with importing HTML into Django using fixtures. The specific issue revolves around "Events", which is a model within my Django app ...

What could be causing my Django application to display a blank page?

The data returned from rasp.py includes the sensor data connected to Raspberry Pi and the current time. These values need to be passed from my Django application views to the HTML file to display a graph, but instead, I am getting a blank page. rasp.py # ...

Instructions for integrating AJAX into a PHP script

I am looking to incorporate AJAX into my PHP file so that when I delete an item from a list, the data automatically reloads and the list is updated with the new information. I have created a list of all my data along with a delete button. Below is the PH ...

Why does the Select2 Drop down eliminate the mandatory border color?

Within my application, I have implemented a feature where required fields are designated with a red border. To achieve this effect, I utilized the following CSS code: input[data-val-required], select[data-val-required] { border: 1px solid #EFA4A4 !imp ...

Detecting iOS format in HTML email communications allows for a more seamless

Recently, I discovered a meta tag that removes the phone number as a link in HTML on iOS. I'm curious if this also works with HTML emails. <meta name="format-detection" content="telephone=no"> I've been using workarounds to handle address ...

What is the method used to calculate the heights of flex items when the flex-direction property is set to column?

I'm currently grappling with the concept of flexbox layout and have been exploring the flex-direction: column option. HTML <div class="container"> <div class="item"> Lorem ipsum dolor sit amet consectetur a ...

Disappearing PHP Session following a redirection

I'm encountering an issue with the LDAP Authentication redirection in my system. When I access Index.php, it correctly redirects me to the login page (login.php). However, after entering my credentials, it fails to redirect me back to the Index Page. ...

Improving the efficiency of CSS animations

Is it possible to improve the performance of CSS animation by preventing it from running when the animated object is not visible on the viewport? Thank you! ...

The WordPress issue of a background image not displaying properly when using both a linear gradient and an image

Code snippet: style="background-image: linear-gradient(151deg,#6a7a8f 9%,#8692A4 30%,#a9b1be 49%, #ced2d9 66%, #f1f0f1 88%),url(<?php echo $page['image']; ?>);" Within the div, only the linear gradient is visible. When I switch the order ...

Automatic Textbox Closer

Connected to this AngularJS issue on IE10+ where textarea with placeholder causes "Invalid argument." and also this AngularJS 1.1.5 problem in Internet Explorer with ng-show and objects (Bug), we had to resort to using the textarea element as a self-closin ...

What is the best way to eliminate products that have already been utilized?

Take a look at my code snippet. $(function() { $("#tags input").on({ focusout: function() { var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // only allow certain characters if (txt) $("<span/& ...

How can you switch between CSS styles using JQuery?

Is there a way to change CSS properties every time I click using jQuery? I couldn't find any information on this specific topic. Can someone guide me on how to achieve this with jQuery? I want the background color to change each time it is clicked. W ...

"Incorporating input boxes for MySQL updates using PHP, MySQL, and HTML

I'm looking to make my input box dynamic, where it can read the current value from the database and allow users to change that value. Currently, when I enter a number like 1000 into the input box, it posts fine. The PHP results show: Data updated: c ...

Different ways to display an HTML page in a well by utilizing a div tag and jQuery from a side menu

Check out my Tutorial Page! Currently, I am working on a simple tutorial page utilizing bootstrap 3. My goal is to showcase the HTML file content within the well container on the right side of the page. However, I am facing challenges as I do not want to ...

Is there a way to insert a colored square into a <button> tag rather than text?

Looking for help with the following HTML: <button name="darkBlue" onclick="setThemeColor(this.name)">Blue</button> <button name="black" onclick="setThemeColor(this.name)">Black</button> I'm interested in replacing the text on ...

Prioritize the Menu display

Is there a way to bring the menu's black background in front of the body text in the image below? Here is the JSFiddle link for reference: https://jsfiddle.net/johnking/j58cubux/6/ The issue occurs when scrolling down and the menu is not clearly vi ...

The fascinating CSS Circle interaction on mouse click or hover

I am encountering a challenge with my circular element: Here is the HTML code for it: <div id="quadrant-sizer"></div> And here is the CSS styling: #quadrant-sizer { width: 40px; height: 40px; border-radius: 999px; } The issue I ...