What could be the reason for foundations occasionally failing to size columns equally?

Check out this foundation JSFiddle I created: http://jsfiddle.net/nycynik/qn8z3cut/2/

When I view it, the layout doesn't resemble tic-tac-toe at all. The right column is aligned to the right, and the sizes of the other columns are all different. I was expecting them all to have the same size.

<body>
    <div class="wrapper">
        <div class="row">
            <div class="small-12 medium-4 large-4 columns yellow_gradient">
                <h2>1C</h2>
                <p>Rough Diamond</p>
                <hr />
                <p>Poor Performance<br/>High Potential</p>
            </div>
            <div class="small-12 medium-4 large-4 columns green_gradient">
                <h2>1B</h2>
                <p>Future Star</p>
                <hr />
                <p>Good Performance<br/>High Potential</p>
            </div>
            <div class="small-12 medium-4 large-4 columns green_gradient">
                <h2>1A</h2>
                <p>Consistent Star</p>
                <hr />
                <p>Outstanding Performance<br/>High Potential</p>
            </div>
        </div>
        <div class="row">
            <div class="small-12 medium-4 large-4 columns yellow_gradient">
                <h2>2C</h2>
                <p>Inconsistent Player</p>
                <hr />
                <p>Poor Performance<br/>Moderate Potential (new role)</p>
            </div>
            <div class="small-12 medium-4 large-4 columns yellow_gradient">
                <h2>2B</h2>
                <p>Key Player</p>
                <hr />
                <p>Good Performance<br/>Moderate Potential</p>
            </div>
            <div class="small-12 medium-4 large-4 columns green_gradient">
                <h2>2A</h2>
                <p>Current Star</p>
                <hr />
                <p>Outstanding Performance<br/>Moderate Potential</p>
            </div>
        </div>
        <div class="row">
            <div class="small-12 medium-4 large-4 columns red_gradient">
                <h2>3C</h2>
                <p>Talent Risk</p>
                <hr />
                <p>Poor Performance<br/>Limited Potential</p>
            </div>
            <div class="small-12 medium-4 large-4 columns yellow_gradient">
                <h2>3B</h2>
                <p>Solid Professional</p>
                <hr />
                <p>Good Performance<br/>Moderate Potential</p>
            </div>
            <div class="small-12 medium-4 large-4 columns yellow_gradient">
                <h2>3A</h2>
                <p>High Professional</p>
                <hr />
                <p>Outstanding Performance<br/>Limited Potential</p>
            </div>
        </div>
    </div>
</body>

Answer №1

The foundation.min.css stylesheet that you are referring to does not contain the necessary column classes such as small-12 or medium-4.

For an updated version, check out this modified fiddle that links to the latest CDN stylesheet of Foundation available at

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

What is the best way to adjust the width of a navbar using JavaScript?

I am experimenting with a responsive design and facing an issue - the width of my #menu in CSS is initially set to 0, but I need to change this value based on user input using JavaScript. Now, I want to dynamically adjust the width of the menu for differe ...

How to ensure the height of an image in a Bootstrap flex row matches the

I just updated to the latest Bootstrap 5.0 beta version and I'm working with this html code snippet: <div> <div class="d-flex flex-row"> <img src="img/funny.png" alt=""> ...

Tips for ensuring consistent spacing between font icons within a navigation bar when using text with font icons as links

Below is the code I have implemented for a navigation bar: body { margin: 0; } .navbar { display: inline-block; background-color: #495057; width: 100%; } .navbar ul { list-style-type: none; text-align: center; float: left; } .navbar ul ...

What causes my form submission to redirect to a php file instead of staying on the

I'm currently using PHP mailer to send emails with data. The form submission is working perfectly on XAMPP locally, as I receive the email with the specified data after submitting the form. However, when I try running my app on Vercel or Netlify, it ...

Having trouble opening the prompt window by clicking on the button

I have been given an assignment to check if a given number is an Armstrong number. However, I am facing an issue where the prompt window does not appear when I click the button. This issue only arises when the rest of the function is written out. If the ...

The issue of video tags not displaying previews on iPhone across all browsers is also accompanied by problems with controls not functioning correctly

As I delve into the world of HTML5 video tags, I encountered an issue where the video wouldn't show a preview frame initially. Instead, only the Resume button would appear. Furthermore, after playing the video with the Resume button, it wouldn't ...

Showcasing certain elements as the user scrolls

Looking for a way to display an element (such as a div) when the user scrolls without using JQuery? Here's an example that tries to achieve this: var scroll = document.body.scrollTop; var divLis = document.querySelectorAll("div"); for(let i = 0; i ...

What is the best method for implementing page transitions between components in NextJS?

My goal is to create a form that smoothly slides to the right, similar to the one seen on DigitalOcean's website when you click "Sign up using email" here: . While the transition itself is relatively simple, I noticed that DigitalOcean uses 2 separat ...

What are some strategies to stop a jQuery UI button created with a link from inheriting the link's text color?

I recently came across a recommendation to create a jQuery button on top of a link for redirect purposes: <a href="/search" class="button">My link</> $(".button").button(); However, I noticed that if the button class has a red foreground colo ...

Passing the final element of a POST array to a different page

I am having trouble retrieving the correct array values from the form. In my code, I am invoking the form option value 3 times, which is defined in the database. Here is an example of what is currently in the database: https://i.sstatic.net/G4JQx.png Wh ...

How to position slides in the center using react-slick

I'm having difficulty achieving vertical centering for an image in a react-slick carousel implementation. The issue can be seen here. https://codesandbox.io/s/react-slick-playground-o7dhn Here are the problems identified: Images are not centered: ...

Does JSX have an API that can handle self-closing tags, such as <br>, if they are not closed properly?

For my latest project, I've been working on a ReactJS component using JSX and it looks something like this: <script type="text/jsx"> var HelloWorld = React.createClass({ render: function() { return ( < ...

I am having trouble getting my console.log function to work properly on my HTML page

As a beginner in JavaScript, I am facing an issue with my console.log not working at all. When I type a console.log message, nothing shows up on my HTML page. I have tried to debug it, but being a newbie, I lack the necessary knowledge. All I can do is see ...

What is the process for integrating vue-select into the dialog of JqxScheduler?

If you want to customize the JqxScheduler's edit dialog, you can modify the existing containers in the editDialogCreate method. Here is an example: var titleSelector = $(` <div> <div class='jqx-scheduler-edit-dialog-label' ...

Are there any tools you rely on for speeding up the process of developing html/css?

Have you heard of zen-coding? It's a script that generates markup based on a css-esque selector like this: div#foo > p*6 This code would generate: <div id="foo"> <p></p> <p></p> <p></p> & ...

Issues arise with tabbed content as default content fails to display and classes are not added upon clicking

I'm currently working on a tabbed module that consists of three tabs. Here's how it operates: When the user clicks on a carousel_element, it reveals carousel_hidden-text within that div and displays it in another div called carousel_quote. I&ap ...

Is there a way to insert animated images in front of every navigation menu item?

I have successfully implemented the HTML and CSS for my navigation menu items, but now I'm facing an issue trying to incorporate unique images right before each menu item in WordPress. Due to the hover animation on the menu names, I couldn't get ...

What could be causing the issue of CSS Styles not being applied to an Angular 2 component with Vaadin elements?

Currently, I am immersed in the tutorial on Vaadin elements using Angular 2 that I stumbled upon here In section 5.3, Styles are applied to the app.component.ts as shown below import { Component } from [email protected]/core'; @Component({ select ...

Verify for any alterations in the code by utilizing the inspect element feature

Currently dealing with a security concern regarding my older Java application. Is there a method available to detect any modifications made to my code (HTML or script) through Developer Tools on the user's end? This would allow me to prevent form subm ...

svg rect mistakenly appearing as a rounded polygon

I found a cool SVG pie chart on this codepen that I want to modify. The original chart is 50 x 50 and animated, but I want to make it 20 x 20. To resize the pie chart, I tried changing the width, height, radius, and center points in the code. I also adjus ...