I'm baffled by this unsemantic grid - why is the final div getting pushed below the rest?

I am working with the unsemantic fluid grid system and aiming to create a row of divs that are all in line and together cover 100% of the page.

<div class="grid-container">
  <div class="grid-parent yy name-strip zz"> 
    <div class="yellow-pink-border mobile-grid-20 xx"></div> 
    <div class="green-blue-border mobile-grid-40 xx"></div>
    <div class="red-yellow-border mobile-grid-15 xx"></div>
    <div class="yellow-pink-border mobile-grid-20 xx"></div>
    <div class="green-blue-border mobile-grid-5 xx"></div> 
  </div>
</div>

Calculating it, the total percentage should add up to 100% so why does the last div (green-blue-border mobile-grid-5) move down to the next line when the browser window is resized, typically around 200px on jsfiddle's result?

http://jsfiddle.net/WNRbS/9/

Despite following the same breakpoint, I cannot seem to figure out what might be causing this issue.

htmlcssfluid-layout

Answer №1

Locate this and substitute it

JSBIN LINK http://jsbin.com/lvtrvd/44Jnx/

.grid-5, .mobile-grid-5, .tablet-grid-5, .grid-10, .mobile-grid-10, .tablet-grid-10, .grid-15, .mobile-grid-15, .tablet-grid-15, .grid-20, .mobile-grid-20, .tablet-grid-20, .grid-25, .mobile-grid-25, .tablet-grid-25, .grid-30, .mobile-grid-30, .tablet-grid-30, .grid-35, .mobile-grid-35, .tablet-grid-35, .grid-40, .mobile-grid-40, .tablet-grid-40, .grid-45, .mobile-grid-45, .tablet-grid-45, .grid-50, .mobile-grid-50, .tablet-grid-50, .grid-55, .mobile-grid-55, .tablet-grid-55, .grid-60, .mobile-grid-60, .tablet-grid-60, .grid-65, .mobile-grid-65, .tablet-grid-65, .grid-70, .mobile-grid-70, .tablet-grid-70, .grid-75, .mobile-grid-75, .tablet-grid-75, .grid-80, .mobile-grid-80, .tablet-grid-80, .grid-85, .mobile-grid-85, .tablet-grid-85, .grid-90, .mobile-grid-90, .tablet-grid-90, .grid-95, .mobile-grid-95, .tablet-grid-95, .grid-100, .mobile-grid-100, .tablet-grid-100, .grid-33, .mobile-grid-33, .tablet-grid-33, .grid-66, .mobile-grid-66, .tablet-grid-66 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 0px;
    padding-right:0px;

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

Navigate to the first item on the menu in the Chrome browser

Why does the First Menu Item (.chosen) jump in Chrome Browser when refreshed? It seems like it's changing the Padding-Right and Padding-Bottom. Please review the code and help me solve this irritating issue. It works fine in Firefox. <body> ...

jqueryhtmlcss

When working with NodeJS and an HTML form, I encountered an issue where the 'Endpoint'

Having trouble sending input data from a form to my nodejs endpoint. When I try printing the req.body, it shows up as undefined and I can't figure out why. Here is the relevant API code snippet: var bodyParser = require('body-parser') var e ...

javascripthtmlnode.jsexpressrequest

Exploring BreakPoints using gridlisttiles

Can Grid List Tile components be configured to occupy the entire screen on small devices using sm={12} lg={6}, but only half of the screen on larger devices? If not, is there a way to adjust the grid list layout to display fewer tiles per row on smaller ...

cssreactjsmaterial-ui

Injecting a JavaScript object into an HTML string

I am facing an issue with a JavaScript variable I have, which points to a specific DOM element that I want to display somewhere else within the DOM structure. Here is how it is defined: var salesRep = $("ul.map").attr("id","1"); My goal is to pass this v ...

javascriptjqueryhtmljson

The safari browser is not displaying the menu

I have recently been working on a new website and created a fresh menu for it. While the menu functions perfectly on browsers like Chrome and Firefox, I encountered an error when testing it on Safari. On Safari, the menu appears to be completely hidden. ...

csssafariviewporthidden

Break up a line within an ionic element by inserting a linebreak tag

Currently, I am constructing an app using ionic framework and facing a challenge in inserting a linebreak within an ionic tag to ensure proper display inside the designated container... <h2>{{caravan.model}}</h2> ...

htmlcssangularjsionic-frameworktags

The alignment of the footer navigation is off-center

I can't seem to get my footer navigation centered properly. I've tried adjusting the CSS but it's still not working as expected. .main-footer li { float: left; font-size: 0.85em; padding: 0 0.5em; margin-bottom: 0.5em; } .main-fo ...

csscss-floattext-align

Retrieve the server code periodically and automatically refresh the form elements

Let's kick things off by explaining how the application functions: (please note there are multiple users on the page such as Patient M, Patient E, and so forth) 1) Check In: Next to Patient X's name, you will find a button labeled Check In. This ...

phpjavascriptjqueryhtmlajax

Retrieve CSS height using Jquery, based on the declared value rather than the computed value

In a previous version of jQuery, the default behavior was different. When I use .css("height") and .height(), it gives me the computed height instead of what I actually want. I only need the height value if it is explicitly declared in the CSS for that ele ...

jqueryhtmlcss

html - displaying a new page within the content of the current page

I have a question about basic HTML knowledge that I find embarrassing Is it possible to open or load a second page within my first page? I want a menu button that will load the second page. <li class="current"><a href="first.html" target = "myC ...

htmlcss

I would like the dropdown menu to only appear on mobile devices

After creating a dropdown menu, I now want it to only appear in mobile view and not in other views. I believe this can be achieved using "visible-xs" or a similar method, but I am struggling with the coding. Below is my HTML code: <nav class="navb ...

htmlcssbootstrap-4

Apply a style to the div element that contains a TextInput component

As a beginner in the world of React and Material UI, I am currently working with Material UI version "1.0.0-beta.17", React 15.6.2, styled-components 2.0.0, and styled-components-breakpoint 1.0.1. Within a div element, I have two TextInput fields. const ...

javascriptcssreactjsmaterial-uistyled-components

Unable to use the select function in Android 2.2

When I click on the select button in my app, it displays multiple options. This functionality works smoothly on Android 4.1, but on Android 2.2, clicking on the select button does not have any effect and therefore the options cannot be selected. <sec ...

androidjqueryhtmlcss

Error importing reach-router in Gatsbyjs causing website to break

While working on my Gatsby project, I decided to incorporate the React Cookie Consent package. However, upon installation and implementation attempt, my website crashed, displaying this error message: warn ./.cache/root.js Attempted import error: &a ...

javascripthtmlnpmgatsby

Developing a universal.css and universal.js file for a custom WordPress theme

I have developed a custom WordPress theme with an extensive amount of code. To manage the numerous style and script files, I have segmented them into multiple individual files. To integrate all these files into my template, I utilized the following code w ...

javascriptjquerycsswordpress

Avoid the ability for individuals to interact with the icon embedded within a button

I'm currently working on a website where users need to interact with a button to delete an "Infraction." The button has a basic bootstrap style and includes an icon for the delete action. <button referencedInfraction="<%= i.infractionID %>" ...

javascripthtmljquerytwitter-bootstrap

Utilizing HTML/CSS to display text and an image positioned above a sleek navigation bar

I am struggling to align a logo on the left side of my website, with text on the right next to it, all placed above the navigation bar. Despite my efforts, I just can't seem to get them positioned correctly! CSS .headerLogo{ float:left; marg ...

csshtmlcss-positionpositioning

`Unable to activate label function in HTML`

As I dabble around with HTML and CSS, I've been experimenting with creating a custom file selection button. I came across a method on the internet that involves hiding the original button and superimposing a new one over it using the following code: ...

htmlcss

Ways to Resolve Issues with WordPress Update and Publish Failures

It has been quite some time since Gutenberg was introduced to us, and it seems like we all have a complicated relationship with it. Navigating the Block editor to create a post or page can be challenging, especially when it used to be so simple. But what& ...

phphtmlcsssqlwordpress

Unusual actions observed when using CSS pseudo selector :checked

I have implemented a unique CSS solution to showcase a five-star rating system on my website. The method I followed can be found at . While this technique works flawlessly in some sections of my website, it strangely fails in others. Could this be due to c ...

htmlcsscss-selectorschecked